{"id":409,"date":"2026-09-01T12:47:41","date_gmt":"2026-09-01T12:47:41","guid":{"rendered":"https:\/\/reytera.it\/?page_id=409"},"modified":"2026-09-14T09:01:55","modified_gmt":"2026-09-14T09:01:55","slug":"home","status":"publish","type":"page","link":"https:\/\/reytera.it\/","title":{"rendered":"Home"},"content":{"rendered":"<div>\n<style>\n  #rey-hero, #rey-hero *, #rey-hero *::before, #rey-hero *::after { box-sizing: border-box; }<\/p>\n<p>  #rey-hero {\n    \/* ---- CONFIG VISIVA: i valori da ritoccare stanno qui ---- *\/\n    --rey-bg:     #F1F4F0;\n    --rey-ink:    #192B35;\n    --rey-muted:  #7C8A90;\n    --rey-line:   #3E6F62;\n    --rey-grid:   rgba(220, 232, 226);\n    --rey-cross:  rgba(25, 43, 53, 0.28);\n    --rey-accent: #2F5D4F;\n    --rey-mono: ui-monospace, \"SFMono-Regular\", \"Roboto Mono\", Menlo, Consolas, monospace;<\/p>\n<p>    position: relative;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    background: var(--rey-bg);\n    color: var(--rey-ink);\n    \/* Altezza totale = quanto scroll consuma l'animazione. 4 schermate.\n       svh (non vh): deve usare la STESSA unit\u00e0 dello stage, altrimenti su\n       telefono \u2014 dove vh e svh differiscono per l'altezza della barra URL \u2014\n       la corsa del pin non corrisponde a un numero intero di schermate. *\/\n    height: 400svh;\n  }<\/p>\n<p>  \/* A fine pin lo stage (alto quanto il viewport ESTESO) sborda di ~80px\n     oltre il fondo della sezione: il clip evita che copra la sezione dopo.\n     Durante il pin non interferisce: un elemento fixed non viene clippato. *\/\n  #rey-hero { overflow: hidden; overflow: clip; }<\/p>\n<p>  \/* Il palcoscenico: una schermata, inchiodata dal pin di ScrollTrigger.\n     100vh e NON 100svh: su telefono 100vh corrisponde al viewport con la\n     barra URL ritirata, quindi lo stage copre sempre tutto lo schermo.\n     Con 100svh, appena la barra si ritirava restava una fascia vuota di\n     ~80px sotto lo stage inchiodato (\"spazi sopra o sotto\"). I contenuti\n     su mobile restano ancorati al viewport PICCOLO con le unit\u00e0 svh. *\/\n  #rey-hero .rey-stage {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    overflow: hidden;\n  }<\/p>\n<p>  \/* ---------- Griglia tecnica ---------- *\/\n  #rey-hero .rey-grid {\n    position: absolute; inset: 0; width: 100%; height: 100%;\n    pointer-events: none; z-index: 0;\n  }\n  #rey-hero .rey-grid line { stroke: var(--rey-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }\n  #rey-hero .rey-crosses { position: absolute; inset: 0; pointer-events: none; z-index: 0; }\n  #rey-hero .rey-cross {\n    position: absolute; width: 21px; height: 21px;\n    margin: -10.5px 0 0 -10.5px;          \/* niente transform: GSAP resta libero *\/\n    background: var(--rey-bg);\n  }\n  #rey-hero .rey-cross::before,\n  #rey-hero .rey-cross::after {\n    content: \"\"; position: absolute; background: var(--rey-cross);\n  }\n  #rey-hero .rey-cross::before { left: 50%; top: 4px; bottom: 4px; width: 1px; margin-left: -0.5px; }\n  #rey-hero .rey-cross::after  { top: 50%; left: 4px; right: 4px; height: 1px; margin-top: -0.5px; }<\/p>\n<p>  \/* ---------- Canvas ----------\n     Tre livelli separati perch\u00e9 ognuno ha un padrone diverso:\n     wrap = centratura (CSS, mai animato) \u00b7 inner = animazione d'ingresso (GSAP)\n     \u00b7 canvas = galleggiamento continuo (GSAP). Se si sovrappongono, i\n     transform si sovrascrivono a vicenda. *\/\n  #rey-hero .rey-canvas-wrap {\n    position: absolute;\n    left: 50%; top: 53%;\n    \/* 500px standard sui desktop grandi; su schermi pi\u00f9 piccoli (sotto\n       ~1316px di larghezza o ~834px di altezza) vincono i limiti in\n       vw\/vh, altrimenti il sasso coprirebbe titolo e annotazioni. *\/\n    width: min(500px, 38vw, 60vh);\n    aspect-ratio: 1 \/ 1;\n    \/* il wrap non \u00e8 mai animato da GSAP, quindi il transform \u00e8 libero:\n       centratura esatta senza calcoli sui margini *\/\n    transform: translate(-50%, -50%);\n    z-index: 1;\n  }\n  .rey-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;   \/* centra tutto in orizzontale *\/\n  justify-content: center;\n  gap: 24px;             \/* spazio tra img, testo e barra *\/\n}\n\/* MASCHERA alpha \u2014 sfuma i FRAME a trasparente verso i bordi:\n   la griglia dietro resta visibile, funziona su qualsiasi sfondo *\/\n#rey-hero .rey-canvas {\n  -webkit-mask-image: radial-gradient(circle at center,\n      black 50%, transparent 72%);\n  mask-image: radial-gradient(circle at center,\n      black 50%, transparent 72%);\n}\n.rey-loader__img {\n  width: 120px;\n  height: 120px;\n  object-fit: contain;   \/* evita deformazioni se l'immagine non \u00e8 quadrata *\/\n  display: block;\n}\n  #rey-hero .rey-canvas-inner { position: absolute; inset: 0; }\n  #rey-hero .rey-canvas { width: 100%; height: 100%; display: block; will-change: transform; }<\/p>\n<p>  \/* Marcatori: ancorati al riquadro del canvas, cos\u00ec seguono il sasso.\n     I margini negativi valgono met\u00e0 del lato: centrano il marcatore sul\n     punto di aggancio. Cambiando il lato vanno ricalcolati (31\/2 = 15.5). *\/\n  #rey-hero .rey-dot {\n    position: absolute;\n    width: 31px; height: 31px;\n    margin: -15.5px 0 0 -15.5px;\n    border-radius: 4px;\n    border: 1px solid rgba(255, 255, 255, .85);\n    background-color: rgba(25, 43, 53, .06);\n    -webkit-backdrop-filter: blur(4px);\n    backdrop-filter: blur(4px);\n    color: var(--rey-ink);\n    display: grid; place-items: center;\n    z-index: 3;\n  }\n  #rey-hero .rey-dot::after { content: \"\"; width: 9px; height: 9px; border-radius: 50%; background: var(--rey-line); }<\/p>\n<p>  \/* ---------- Collegamenti (disegnati in px da misure reali) ---------- *\/\n  #rey-hero .rey-links { position: absolute; inset: 0; pointer-events: none; z-index: 2; }\n  #rey-hero .rey-links polyline {\n    fill: none; stroke: var(--rey-line); stroke-width: 1;\n  }<\/p>\n<p>  \/* ---------- Testo tecnico ---------- *\/\n  #rey-hero .rey-annot {\n    position: absolute; z-index: 3; margin: 0;\n    font-family: Aptos, ui-sans-serif, system-ui, -apple-system, sans-serif;\n    font-size: 14px;\n    color:#2F5D4F;\n    font-weight: bold;\n    line-height: 1.35;\n    letter-spacing: 0.02em;\n    text-transform: uppercase;\n    \/* La scatola si dimensiona sul TESTO (max-content): le righe sono solo\n       quelle dei <br \/> nel markup, e la linea disegnata sotto \u2014 che segue la\n       larghezza della scatola \u2014 combacia da sola col testo. Con la larghezza\n       fissa di prima, il grassetto aveva allargato le parole oltre la scatola\n       e la parentesi finiva su una terza riga.\n       Il max-width \u00e8 la rete di sicurezza sui desktop stretti: meglio un\n       a-capo in pi\u00f9 che il testo sotto al sasso. *\/\n    width: max-content;\n    max-width: min(230px, 22vw);\n  }\n  \/* La seconda annotazione sta su UNA riga e si estende verso destra, dove\n     di spazio ce n'\u00e8 fino al bordo: tetto pi\u00f9 largo del generico qui sopra,\n     che \u00e8 tarato sul lato del sasso. *\/\n  #rey-hero #reyA3 { max-width: min(320px, 30vw); }<\/p>\n<p>  \/* ---------- Titolo ----------\n     La tipografia la decide la classe del tema (.uk-heading-large): qui\n     impostiamo SOLO la posizione. Le propriet\u00e0 tipografiche stanno dentro\n     :where() cos\u00ec hanno specificit\u00e0 0 e la classe YOOtheme vince sempre \u2014\n     con `#rey-hero .rey-title` (1,1,0) batteremmo `.uk-heading-large` (0,1,0)\n     e il titolo non erediterebbe pi\u00f9 lo stile del tema. *\/\n  \/* Il blocco intestazione: etichetta .label-dot sopra + h1 sotto.\n     \u00c8 LUI a essere posizionato; il titolo dentro resta in flusso. *\/\n  #rey-hero .rey-heading {\n    position: absolute;\n    left: 3.4%; top: 8%;\n    z-index: 4;\n    max-width: 90%;\n  }\n  \/* ---------- Etichetta sopra il titolo ----------\n     Dentro :where() (specificit\u00e0 0) cos\u00ec una eventuale .label-dot del tema\n     vince sempre su queste regole. La versione precedente usava\n     `#rey-hero .rey-heading .label-dot` (1,2,0) e schiacciava il\n     `display:flex` di una .label-dot definita fuori (0,1,0): il pallino\n     non si disponeva mai. *\/\n  :where(#rey-hero .label-dot) {\n    --dot-size: 9px;\n    --dot-gap: 10px;\n    display: flex;\n    align-items: center;\n    gap: var(--dot-gap);\n    font-family: Aptos, ui-sans-serif, system-ui, -apple-system, sans-serif;\n    font-size: 15px;\n    font-weight: 600;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    position: relative;\n    left:5px;\n    \/* --green se il tema la definisce, altrimenti il verde della hero *\/\n    color: var(--green, var(--rey-accent));\n  }\n  :where(#rey-hero .label-dot)::before {\n    content: \"\";\n    flex-shrink: 0;\n    width: var(--dot-size); height: var(--dot-size);\n    border-radius: 50%;\n    background: var(--green, var(--rey-accent));\n  }\n  \/* Spaziatura FUORI da :where(): \u00e8 layout, non tipografia, e deve valere\n     anche se il tema ridefinisce .label-dot.\n     Nessun margine negativo: il PALLINO parte dal bordo sinistro, in colonna\n     col titolo sotto. (Sporgendo nel margine si allineerebbe il testo, ma il\n     riferimento visivo richiesto \u00e8 il pallino.) *\/\n  #rey-hero .rey-heading .label-dot { margin: 0 0 20px; }<\/p>\n<p>  #rey-hero .rey-title { margin: 0; }\n  \/* fallback tipografico: sparisce appena il tema applica .uk-heading-large *\/\n  :where(#rey-hero .rey-title) {\n    font-size: clamp(1.8rem, 3.6vw, 4rem);\n    line-height: 1.05;\n    letter-spacing: -0.03em;\n    font-weight: 500;\n  }<\/p>\n<p>  \/* ---------- Testo + CTA: in basso a sinistra, sotto il titolo ---------- *\/\n  #rey-hero .rey-foot {\n    position: absolute;\n    left: 3.4%; bottom: 10%;\n    z-index: 4;\n    \/* min() sceglie il PI\u00d9 PICCOLO dei due: alzare solo i `ch` non allarga\n       nulla finch\u00e9 l'altro resta pi\u00f9 basso \u2014 vanno mossi INSIEME.\n       63ch \u2248 576px con Aptos 20px: la larghezza piena, dove c'\u00e8 spazio.\n       Il secondo termine \u00e8 il tetto GEOMETRICO: la distanza dal bordo\n       sinistro reale del sasso (misurato: 16.5% del canvas dal suo bordo,\n       quindi a 33.5% dal centro; il canvas \u00e8 min(500px, 38vw, 60vh)\n       centrato al 50%, il testo parte al 3.4%) meno 16px di respiro.\n       Il min() qui DEVE restare identico a quello del canvas-wrap:\n       se cambi uno, cambia anche l'altro. *\/\n    max-width: min(63ch, calc(46.6% - 0.335 * min(500px, 38vw, 60vh) - 16px));\n  }\n  #rey-hero .rey-foot p {\n    margin: 0 0 1.4em;\n    \/* Aptos: gi\u00e0 caricato dal tema. Le altre sono solo rete di sicurezza. *\/\n    font-family: Aptos, ui-sans-serif, system-ui, -apple-system, sans-serif;\n    font-size: 20px;\n    line-height: 1.5;\n  }\n  \/* Il bottone usa il componente .rcta del sito: nessuno stile qui, cos\u00ec\n     resta coerente col resto ed eredita eventuali modifiche future. *\/<\/p>\n<p>  \/* ---------- Mini-card immagine (al posto della vecchia card) ---------- *\/\n  #rey-hero .rey-thumb {\n    position: absolute; right: 3.4%; top: 25%; z-index: 4; margin: 0;\n    width: clamp(120px, 13vw, 200px); aspect-ratio: 1 \/ 1;\n    border: 1px solid var(--rey-line);\n    background: rgba(255,255,255,.45);\n    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n    overflow: hidden;\n  }\n  #rey-hero .rey-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }<\/p>\n<p>  \/* ---------- Avanzamento ---------- *\/\n  #rey-hero .rey-progress {\n    position: absolute; right: 3.4%; bottom: 10%; z-index: 4;\n    display: flex; align-items: center; gap: .8em;\n    font-family: var(--rey-mono); font-size: 10px; letter-spacing: .1em;\n    color: var(--rey-muted); text-transform: uppercase;\n  }\n  #rey-hero .rey-progress__bar {\n    width: clamp(60px, 8vw, 120px); height: 1px;\n    background: var(--rey-grid); position: relative; overflow: hidden;\n  }\n  #rey-hero .rey-progress__fill {\n    position: absolute; inset: 0; background: var(--rey-ink);\n    transform: scaleX(0); transform-origin: left center;\n  }<\/p>\n<p>  \/* ---------- Loader ----------\n     Su desktop la sequenza pesa ~12 MB: l'attesa \u00e8 reale e va raccontata,\n     altrimenti sembra una pagina rotta. Percentuale che sale + barra che si\n     riempie + un riflesso che scorre di continuo, cos\u00ec resta viva anche se\n     la rete si impunta. *\/\n  #rey-hero .rey-loader {\n    position: absolute; inset: 0; z-index: 20;\n    display: grid; place-items: center; align-content: center; gap: .9em;\n    background: var(--rey-bg); transition: opacity .7s ease;\n  }\n  #rey-hero .rey-loader[data-done=\"true\"] { opacity: 0; pointer-events: none; }\n  \/* Il titolo al posto della percentuale: un numero ha senso solo se l'attesa\n     dura, e quando i frame arrivano tutti insieme si vede il solo \"000\". *\/\n  #rey-hero .rey-loader__label {\n    font-family: Aptos-Light, ui-sans-serif, system-ui, -apple-system, sans-serif;\n    font-size: 16px;\n    line-height: 1.4;\n      font-weight: bold;\n    text-align: center;\n    text-wrap: balance;          \/* righe di lunghezza simile, dove supportato *\/\n    color: #3E6F62;\n    max-width: min(34ch, 82vw);\n  }\n  #rey-hero .rey-loader__bar {\n    width: min(200px, 30vw); height: 1px; background: var(--rey-grid);\n    position: relative; overflow: hidden;\n  }\n  #rey-hero .rey-loader__fill {\n    position: absolute; inset: 0; background: var(--rey-line);\n    transform: scaleX(0); transform-origin: left center;\n  }\n  \/* riflesso che scorre: \u00e8 l'unica parte che si muove anche a progresso fermo *\/\n  #rey-hero .rey-loader__bar::after {\n    content: \"\"; position: absolute; inset: 0;\n    background: linear-gradient(90deg, transparent, var(--rey-line), transparent);\n    opacity: .55;\n    transform: translateX(-100%);\n    animation: reyLoaderSweep 1.5s ease-in-out infinite;\n  }\n  @keyframes reyLoaderSweep { to { transform: translateX(100%); } }\n  @media (prefers-reduced-motion: reduce) {\n    #rey-hero .rey-loader__bar::after { animation: none; opacity: 0; }\n  }<\/p>\n<p>  \/* ---------- Responsive ----------\n     Sotto i 960px restano: titolo, animazione, mini-card (piccola, con la\n     sua linea verso il sasso, come nel riferimento mobile) e testo + CTA.\n     Spariscono le annotazioni laterali e l'indicatore di avanzamento. *\/\n  @media (max-width: 960px) {\n    #rey-hero { height: 320svh; }\n    #rey-hero .rey-annot, #rey-hero .rey-dot,\n    #rey-hero .rey-progress { display: none; }\n    \/* l'unico marcatore che resta: l'aggancio della linea della mini-card,\n       spostato verso il centro dell'animazione. !important: le coordinate\n       desktop stanno inline nel markup e senza vincerebbero comunque. *\/\n    #rey-hero #reyM2 { display: grid; left: 55% !important; top: 40% !important; }\n    \/* Spazi tarati sul titolo a 3 righe. Le posizioni verticali sono in svh\n       (viewport CON barra URL): lo stage \u00e8 alto 100vh \u2014 il viewport esteso \u2014\n       e con le percentuali i contenuti scivolerebbero sotto la piega quando\n       la barra \u00e8 aperta. La riga in % prima \u00e8 il ripiego per browser vecchi. *\/\n    \/* Tutto il blocco visivo spostato in ALTO (45svh) per staccare l'ultimo\n       frame \u2014 il sasso arriva al 95% del riquadro \u2014 dal paragrafo sotto. *\/\n    #rey-hero .rey-canvas-wrap { width: 64vw; top: 45%; top: 45svh; }\n    \/* left 6% come il paragrafo sotto, cos\u00ec le colonne di testo sono incolonnate *\/\n    #rey-hero .rey-heading { left: 6%; top: 4%; top: 4svh; max-width: 88%; }\n    #rey-hero .rey-thumb {\n      width: clamp(72px, 21vw, 100px);\n      right: 6%; top: 26%; top: 26svh;      \/* sotto l'intestazione con l'etichetta *\/\n    }\n    \/* bottom riferito allo stage (100vh): per stare a 20px dalla piega del\n       viewport PICCOLO va aggiunta la differenza fra i due viewport *\/\n    #rey-hero .rey-foot {\n      left: 6%; max-width: 88%;\n      bottom: 20px;\n      bottom: calc(100% - 100svh + 20px);\n    }\n  }<\/p>\n<p>  \/* ---------- Tablet (dentro la fascia mobile) ----------\n     Su tablet il viewport \u00e8 alto ma l'animazione \u00e8 dimensionata in vw:\n     col testo ancorato al fondo restava un vuoto enorme in mezzo.\n     Qui il testo si aggancia alla BASE dell'animazione: il sasso finisce a\n     45svh + 30.4vw (centro 45svh + il 95% di met\u00e0 dei 64vw di lato). *\/\n  @media (min-width: 600px) and (max-width: 960px) {\n    #rey-hero .rey-foot {\n      bottom: auto;                       \/* stacca l'ancora dal fondo *\/\n      top: calc(45svh + 30.4vw + 20px);   \/* 20px sotto la base del sasso *\/\n    }\n  }\n<\/style>\n<section id=\"rey-hero\">\n<div class=\"rey-stage\" id=\"reyStage\">\n<p>    <!-- Griglia tecnica --><br \/>\n    <svg class=\"rey-grid\" viewBox=\"0 0 1000 1000\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n      <line x1=\"250\" y1=\"0\" x2=\"250\" y2=\"1000\"><\/line>\n      <line x1=\"500\" y1=\"0\" x2=\"500\" y2=\"1000\"><\/line>\n      <line x1=\"750\" y1=\"0\" x2=\"750\" y2=\"1000\"><\/line>\n      <line x1=\"0\" y1=\"333\" x2=\"1000\" y2=\"333\"><\/line>\n      <line x1=\"0\" y1=\"667\" x2=\"1000\" y2=\"667\"><\/line>\n    <\/svg><\/p>\n<div class=\"rey-crosses\" id=\"reyCrosses\" aria-hidden=\"true\"><\/div>\n<p>    <!-- Collegamenti: i punti li calcola il JS dalle misure reali --><br \/>\n    <svg class=\"rey-links\" id=\"reyLinks\" aria-hidden=\"true\"><\/svg><\/p>\n<p>    <!-- Intestazione: etichetta del tema + titolo (uk-heading-large) --><\/p>\n<div class=\"rey-heading\" id=\"reyHeading\">\n      <span class=\"label-dot\">From seeds to ingredients<\/span><\/p>\n<h1 class=\"rey-title uk-heading-large\">Botanica ed estrazione,<br \/>\n        in un\u2019unica piattaforma industriale.<br \/>\n      <\/h1>\n<\/p><\/div>\n<p>    <!-- Sequenza --><\/p>\n<div class=\"rey-canvas-wrap\" id=\"reyWrap\">\n<div class=\"rey-canvas-inner\" id=\"reyInner\">\n        <canvas class=\"rey-canvas\" id=\"reyCanvas\"><\/canvas>\n      <\/div>\n<p>      <!-- marcatori in % del riquadro del canvas: seguono il sasso --><br \/>\n      <span class=\"rey-dot\" id=\"reyM1\" style=\"left:18%; top:52%\"><\/span><br \/>\n      <span class=\"rey-dot\" id=\"reyM2\" style=\"left:80%; top:44%\"><\/span><br \/>\n      <span class=\"rey-dot\" id=\"reyM3\" style=\"left:62%; top:70%\"><\/span>\n    <\/div>\n<p>    <!-- Annotazioni --><\/p>\n<p class=\"rey-annot\" id=\"reyA1\" style=\"left:15%; top:41%\">\n      [ Coltivazione<br \/>in ambiente controllato ]\n    <\/p>\n<p class=\"rey-annot\" id=\"reyA3\" style=\"left:62%; top:70%\">\n      [ Estrazione e tracciabilit\u00e0 ]\n    <\/p>\n<p>    <!-- Mini-card --><\/p>\n<figure class=\"rey-thumb\" id=\"reyThumb\"><img id=\"reyThumbImg\" alt=\"\" decoding=\"async\"><\/figure>\n<p>    <!-- Piede --><\/p>\n<div class=\"rey-foot\" id=\"reyFoot\">\n<p>Reytera integra sviluppo botanico, coltivazione in ambiente controllato e processi di trasformazione per creare ingredienti vegetali controllati, ripetibili e tracciabili, sviluppati su specifica insieme al cliente.<\/p>\n<p>      <a class=\"rcta rcta--primary rcta--green rcta--pill rcta--sm\" href=\"mailto:amministrazione@reytera.it\" data-rcta><br \/>\n        <span class=\"rcta__text\"><span class=\"rcta__label\">Proponi una partnership<\/span><\/span><br \/>\n      <\/a>\n    <\/div>\n<p>    <!-- Avanzamento --><\/p>\n<div class=\"rey-progress\" id=\"reyProgress\">\n      <span id=\"reyCounter\">001<\/span><br \/>\n      <span class=\"rey-progress__bar\"><span class=\"rey-progress__fill\" id=\"reyProgressFill\"><\/span><\/span><br \/>\n      <span id=\"reyTotal\">240<\/span>\n    <\/div>\n<p>   <!-- Loader --><\/p>\n<div class=\"rey-loader\" id=\"reyLoader\">\n    <img loading=\"lazy\" decoding=\"async\" class=\"rey-loader__img\" src=\"\/wp-content\/uploads\/2026\/07\/img2.png\" alt=\"Reytera\" width=\"100\" height=\"100\"><br \/>\n    <span class=\"rey-loader__label\">DAL SEME ALL&#8217;INGREDIENTE<\/span><br \/>\n    <span class=\"rey-loader__bar\"><span class=\"rey-loader__fill\" id=\"reyLoaderFill\"><\/span><\/span>\n  <\/div>\n<\/p><\/div>\n<\/section>\n<p><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\"><\/script><br \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\"><\/script><\/p>\n<p><script>\n(function () {\n  if (window.__reyHeroInit) return;      \/\/ l'anteprima del builder pu\u00f2 rieseguire il blocco\n  window.__reyHeroInit = true;<\/p>\n<p>  \/* ==========================================================================\n     CONFIG \u2014 l'unico blocco da toccare\n     ========================================================================== *\/\n  const CONFIG = {\n    \/* I frame DEVONO essere trasparenti (AVIF con alpha): il sasso galleggia\n       sopra la griglia. Il path deve finire con '\/'.\n       Cartella nuova (-v2) invece di sovrascrivere la vecchia: cos\u00ec la cache\n       del browser e della CDN non pu\u00f2 servire i frame della grafica passata. *\/\n    path: '\/wp-content\/uploads\/2026\/frames-v4\/',\n    firstFrame: 1,\n    lastFrame: 240,\n    padding: 4,\n    extension: 'jpg',<\/p>\n<p>    scrub: 1.1,          \/\/ inerzia dello scrub (0.5 reattivo \u2014 2 morbido)\n    frameEnd: 0.94,      \/\/ a che punto dello scroll finisce la sequenza\n    fitPadding: 0.98,    \/\/ quanto il render riempie il canvas<\/p>\n<p>    idleAmplitude: 8,    \/\/ galleggiamento: tiene viva la scena a scroll fermo\n    idlePeriod: 7,\n    idleRotation: 0.4,\n    pointerStrength: 12,\n    pointerEase: 0.05,<\/p>\n<p>    \/* Quanti frame bastano per mostrare la hero: il resto continua a\n       scaricarsi in sottofondo, cos\u00ec non si aspettano tutti i megabyte.\n       Tenuto basso di proposito: ogni frame desktop pesa ~47 KB, quindi 14\n       frame = ~650 KB di attesa invece di 1,4 MB. Scorrendo subito si pu\u00f2\n       superare i frame pronti, ma il ripiego di `nearestLoaded` mostra il\n       pi\u00f9 vicino disponibile invece di lasciare il canvas vuoto. *\/\n    warmupFrames: 14,<\/p>\n<p>    \/* Set alternativo per TELEFONO \u2014 non \u00e8 un vezzo, \u00e8 necessario:\n       250 frame da 600px occupano ~343 MB una volta decodificati\n       (600*600*4 byte l'uno) e Safari iOS li scarica o crasha molto prima.\n       125 frame da 360px = ~62 MB e 3 MB di download. Sul canvas mobile,\n       largo ~262 px CSS, la differenza di nitidezza non si vede. *\/\n    mobile: {\n      path: '\/wp-content\/uploads\/2026\/frames-v4-m\/',\n      lastFrame: 120,\n      warmupFrames: 10,\n    },\n  };<\/p>\n<p>  const MOBILE_QUERY = '(max-width: 960px)';\n  \/\/ La scelta \u00e8 fatta una volta sola all'avvio: cambiare set a caldo\n  \/\/ significherebbe ricaricare tutto durante lo scroll.\n  if (matchMedia(MOBILE_QUERY).matches) Object.assign(CONFIG, CONFIG.mobile);<\/p>\n<p>  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;\n  const $ = (sel) => document.querySelector(sel);<\/p>\n<p>  \/* ==========================================================================\n     Griglia \u2014 crocette agli incroci delle linee\n     ========================================================================== *\/\n  function buildCrosses() {\n    const host = $('#reyCrosses');\n    if (!host) return;\n    const xs = [25, 50, 75];\n    const ys = [33.3, 66.7];\n    host.innerHTML = xs.flatMap((x) => ys.map((y) =>\n      `<span class=\"rey-cross\" style=\"left:${x}%; top:${y}%\"><\/span>`\n    )).join('');\n  }<\/p>\n<p>  \/* ==========================================================================\n     Collegamenti \u2014 polilinee da un bordo all'altro, in pixel reali.\n     Forma: orizzontale \u00b7 diagonale \u00b7 orizzontale (come nel riferimento).\n     ========================================================================== *\/\n  const LINKS = [\n    { from: '#reyA1',    to: '#reyM1' },   \/\/ annotazione sinistra \u2192 sasso\n    { from: '#reyThumb', to: '#reyM2', node: true }, \/\/ mini-card \u2192 sasso\n    { from: '#reyA3',    to: '#reyM3' },   \/\/ annotazione bassa    \u2192 sasso\n  ];<\/p>\n<p>  function drawLinks() {\n    const svg = $('#reyLinks');\n    const stage = $('#reyStage');\n    if (!svg || !stage) return;<\/p>\n<p>    const box = stage.getBoundingClientRect();\n    svg.setAttribute('width', box.width);\n    svg.setAttribute('height', box.height);\n    svg.setAttribute('viewBox', `0 0 ${box.width} ${box.height}`);<\/p>\n<p>    \/\/ distanza fra la base del testo e la linea che lo sottolinea\n    const LABEL_GAP = 6;<\/p>\n<p>    \/* Aggancio su un'ETICHETTA: la linea fa da sottolineatura, quindi parte\n       dal bordo INFERIORE e dal lato OPPOSTO al target \u2014 cos\u00ec corre sotto\n       tutta la larghezza del testo, come nel riferimento. Agganciandola al\n       centro verticale, invece, la linea spaccherebbe il testo a met\u00e0. *\/\n    const labelAnchor = (el, towardX) => {\n      const r = el.getBoundingClientRect();\n      const goingRight = towardX > (r.left + r.width \/ 2);\n      const x = goingRight ? r.left : r.right;\n      return { x: x - box.left, y: r.bottom - box.top + LABEL_GAP, width: r.width };\n    };<\/p>\n<p>    \/* Aggancio su un NODO (marcatore, immagine): dal bordo rivolto verso\n       l'altro elemento, a met\u00e0 altezza. *\/\n    const nodeAnchor = (el, towardX) => {\n      const r = el.getBoundingClientRect();\n      const x = towardX > (r.left + r.width \/ 2) ? r.right : r.left;\n      return { x: x - box.left, y: r.top + r.height \/ 2 - box.top, width: r.width };\n    };<\/p>\n<p>    svg.innerHTML = LINKS.map(({ from, to, node }) => {\n      const a = $(from), b = $(to);\n      if (!a || !b) return '';\n      \/\/ endpoint nascosto (es. annotazioni su mobile): niente linea,\n      \/\/ altrimenti finirebbe agganciata a un rettangolo 0x0 in alto a sinistra\n      if (!a.getClientRects().length || !b.getClientRects().length) return '';\n      const rb = b.getBoundingClientRect();\n      const ra = a.getBoundingClientRect();<\/p>\n<p>      const deltaX = (rb.left + rb.width \/ 2) - (ra.left + ra.width \/ 2);\n      const deltaY = (rb.top + rb.height \/ 2) - (ra.top + ra.height \/ 2);<\/p>\n<p>      \/* Collegamento prevalentemente VERTICALE tra due nodi (su mobile la\n         mini-card sta sopra il sasso): scende dal bordo basso, diagonale,\n         entra dall'alto \u2014 come nel riferimento mobile. La forma orizzontale\n         qui produrrebbe una S schiacciata illeggibile. *\/\n      const verticale = node ? Math.abs(deltaY) > Math.abs(deltaX) : false;\n      if (verticale) {\n        const dirY = Math.sign(deltaY) || 1;\n        const p0 = {\n          x: ra.left + ra.width \/ 2 - box.left,\n          y: (dirY > 0 ? ra.bottom : ra.top) - box.top,\n        };\n        const p3 = {\n          x: rb.left + rb.width \/ 2 - box.left,\n          y: (dirY > 0 ? rb.top : rb.bottom) - box.top,\n        };\n        const spanY = p3.y - p0.y;\n        const e1 = p0.y + spanY * 0.38;\n        const e2 = p3.y - spanY * 0.18;\n        const pts = [\n          `${p0.x},${p0.y}`, `${p0.x},${e1}`, `${p3.x},${e2}`, `${p3.x},${p3.y}`,\n        ].join(' ');\n        return `<polyline class=\"rey-link\" points=\"${pts}\"><\/polyline>`;\n      }<\/p>\n<p>      const p0 = (node ? nodeAnchor : labelAnchor)(a, rb.left + rb.width \/ 2);\n      const p3 = nodeAnchor(b, ra.left + ra.width \/ 2);<\/p>\n<p>      const span = p3.x - p0.x;\n      const dir = Math.sign(span) || 1;\n      \/\/ il primo tratto deve superare il testo, altrimenti la diagonale\n      \/\/ partirebbe da sotto le parole invece che dopo\n      const minRun = node ? 24 : p0.width + 24;\n      const run = Math.min(Math.max(Math.abs(span) * 0.38, minRun), Math.abs(span) * 0.75);\n      const e1 = p0.x + dir * run;\n      const e2 = p3.x - span * 0.18;\n      const pts = [\n        `${p0.x},${p0.y}`, `${e1},${p0.y}`, `${e2},${p3.y}`, `${p3.x},${p3.y}`,\n      ].join(' ');\n      return `<polyline class=\"rey-link\" points=\"${pts}\"><\/polyline>`;\n    }).join('');\n  }<\/p>\n<p>  \/* ==========================================================================\n     FrameSequence \u2014 carica i frame e li disegna \"contain\", con crossfade\n     in alpha tra frame adiacenti.\n     ========================================================================== *\/\n  class FrameSequence {\n    constructor(canvas, config) {\n      this.canvas = canvas;\n      this.context = canvas.getContext('2d', { alpha: true });\n      this.config = config;\n      this.images = [];\n      this.frameIndex = 0;\n      this.lastWidth = 0;\n      this.lastHeight = 0;\n      \/* Prefisso contiguo: quanti frame consecutivi dall'inizio sono gi\u00e0\n         scaricati. L'animazione non va mai oltre: senza questo tetto, con\n         il download ancora in corso il ripiego saltava fra i pochi frame\n         disponibili e su mobile la sequenza \"partiva a pezzi\". *\/\n      this.loadedFlags = [];\n      this.readyPrefix = 0;\n      this.pendingProgress = null;\n      this.handleResize = this.handleResize.bind(this);\n    }<\/p>\n<p>    markLoaded(index) {\n      this.loadedFlags[index] = true;\n      while (this.loadedFlags[this.readyPrefix]) this.readyPrefix += 1;\n      \/* se lo scroll era gi\u00e0 pi\u00f9 avanti dei frame pronti, appena il prefisso\n         cresce l'animazione recupera da sola, anche a dito fermo *\/\n      if (this.pendingProgress !== null) this.setProgress(this.pendingProgress);\n    }<\/p>\n<p>    get frameCount() { return this.config.lastFrame - this.config.firstFrame + 1; }<\/p>\n<p>    urlForIndex(index) {\n      const n = this.config.firstFrame + index;\n      return `${this.config.path}${String(n).padStart(this.config.padding, '0')}.${this.config.extension}`;\n    }<\/p>\n<p>    loadOne(index) {\n      return new Promise((resolve) => {\n        const image = new Image();\n        image.onload = () => { this.markLoaded(index); resolve(image); };\n        \/* anche un frame rotto avanza il prefisso: significa \"non lo stiamo\n           pi\u00f9 aspettando\". Al disegno ci pensa il ripiego di nearestLoaded \u2014\n           altrimenti un solo 404 inchioderebbe l'animazione l\u00ec per sempre. *\/\n        image.onerror = () => { this.markLoaded(index); resolve(image); };\n        image.src = this.urlForIndex(index);\n        this.images[index] = image;\n      });\n    }<\/p>\n<p>    \/** Progressivo: risolve dopo i primi `warmupFrames`, il resto arriva dopo. *\/\n    load(onProgress) {\n      let loaded = 0;\n      const total = this.frameCount;\n      const warmup = Math.min(this.config.warmupFrames, total);\n      \/* L'avanzamento va rapportato a `warmup`, non a `total`: il loader\n         sparisce quando i primi `warmup` sono pronti, quindi con `total` la\n         barra arrivava al 12% e poi svaniva a met\u00e0. *\/\n      const track = (p) => p.then((img) => {\n        loaded += 1;\n        onProgress(Math.min(1, loaded \/ warmup));\n        return img;\n      });<\/p>\n<p>      const first = [];\n      for (let i = 0; i < warmup; i += 1) first.push(track(this.loadOne(i)));\n\n      return Promise.all(first).then((r) => {\n        for (let i = warmup; i < total; i += 1) track(this.loadOne(i));\n        return r;\n      });\n    }\n\n    init() {\n      addEventListener('resize', this.handleResize);\n      this.handleResize();\n    }\n\n    handleResize() {\n      const ratio = Math.min(devicePixelRatio || 1, 2);   \/\/ cap DPR\n      const { clientWidth, clientHeight } = this.canvas;\n\n      \/* Su telefono la barra dell'indirizzo che entra ed esce scatena resize\n         continui durante lo scroll: ridimensionare il canvas ogni volta lo\n         svuota e lo ridisegna per nulla. Saltiamo le variazioni trascurabili.\n         NB: in questo script non esiste l'operatore AND scritto coi simboli:\n         WordPress converte quel carattere in entita' HTML e lo script muore\n         con un SyntaxError (successo davvero, due volte). Usare if annidati. *\/\n      const widthDelta = Math.abs(clientWidth - this.lastWidth);\n      const heightDelta = Math.abs(clientHeight - this.lastHeight);\n      if (Math.max(widthDelta, heightDelta) < 2) return;\n      this.lastWidth = clientWidth;\n      this.lastHeight = clientHeight;\n\n      this.canvas.width = clientWidth * ratio;\n      this.canvas.height = clientHeight * ratio;\n      this.context.setTransform(ratio, 0, 0, ratio, 0, 0);\n      this.redraw();\n    }\n\n    setProgress(progress) {\n      const clamped = Math.min(1, Math.max(0, progress));\n      \/* memorizzata PRIMA del tetto: quando il prefisso cresce, markLoaded\n         la rigioca e l'animazione recupera la posizione vera dello scroll *\/\n      this.pendingProgress = clamped;\n      let next = clamped * (this.frameCount - 1);\n      \/* mai oltre l'ultimo frame contiguo gi\u00e0 scaricato: la sequenza avanza\n         solo in ordine, niente salti mentre il download \u00e8 in corso *\/\n      const maxReady = this.readyPrefix - 1;\n      if (maxReady < 0) return;\n      if (next > maxReady) next = maxReady;\n      if (Math.abs(next - this.frameIndex) < 0.01) return;\n      this.frameIndex = next;\n      this.redraw();\n    }\n\n    \/* Il frame pi\u00f9 vicino gi\u00e0 scaricato. Serve perch\u00e9 il resto della sequenza\n       arriva in sottofondo: scorrendo in fretta si pu\u00f2 chiedere un frame non\n       ancora pronto, e senza ripiego il canvas resterebbe vuoto (lampo bianco). *\/\n    nearestLoaded(index) {\n      for (let d = 0; d < this.frameCount; d += 1) {\n        const before = this.images[index - d];\n        if (before) { if (before.naturalWidth) return before; }\n        const after = this.images[index + d];\n        if (after) { if (after.naturalWidth) return after; }\n      }\n      return null;\n    }\n\n    redraw() {\n      const { clientWidth: w, clientHeight: h } = this.canvas;\n      this.context.clearRect(0, 0, w, h);\n      const base = Math.floor(this.frameIndex);\n      const blend = this.frameIndex - base;\n      \/\/ il frame base ha diritto al ripiego, il compagno di crossfade no:\n      \/\/ se manca lo saltiamo, invece di disegnare due volte lo stesso\n      this.drawFrame(base, 1, true);\n      if (blend > 0) { if (base + 1 < this.frameCount) this.drawFrame(base + 1, blend, false); }\n    }\n\n    drawFrame(index, alpha, allowFallback) {\n      let image = this.images[index];\n      if (allowFallback) { if (!image || !image.naturalWidth) image = this.nearestLoaded(index); }\n      if (!image || !image.naturalWidth) return;\n      const { clientWidth: w, clientHeight: h } = this.canvas;\n      const scale = Math.min(w \/ image.naturalWidth, h \/ image.naturalHeight) * this.config.fitPadding;\n      const dw = image.naturalWidth * scale;\n      const dh = image.naturalHeight * scale;\n      this.context.globalAlpha = alpha;\n      this.context.drawImage(image, (w - dw) \/ 2, (h - dh) \/ 2, dw, dh);\n      this.context.globalAlpha = 1;\n    }\n  }\n\n  \/* ==========================================================================\n     AmbientMotion \u2014 galleggiamento + parallasse sul puntatore.\n     Solo transform CSS sul canvas: nessun redraw della sequenza.\n     ========================================================================== *\/\n  class AmbientMotion {\n    constructor(element, config) {\n      this.element = element;\n      this.config = config;\n      this.elapsed = 0;\n      this.target = { x: 0, y: 0 };\n      this.current = { x: 0, y: 0 };\n      this.set = gsap.quickSetter(element, 'css');\n      this.onPointerMove = this.onPointerMove.bind(this);\n      this.update = this.update.bind(this);\n    }\n\n    init() {\n      addEventListener('pointermove', this.onPointerMove, { passive: true });\n      gsap.ticker.add(this.update);\n    }\n\n    onPointerMove(e) {\n      this.target.x = (e.clientX \/ innerWidth) * 2 - 1;\n      this.target.y = (e.clientY \/ innerHeight) * 2 - 1;\n    }\n\n    update(time, deltaMs) {\n      const c = this.config;\n      this.elapsed += deltaMs \/ 1000;\n      this.current.x += (this.target.x - this.current.x) * c.pointerEase;\n      this.current.y += (this.target.y - this.current.y) * c.pointerEase;\n\n      const phase = (this.elapsed \/ c.idlePeriod) * Math.PI * 2;\n      \/\/ seno e coseno sfasati: percorso a otto schiacciato, non un su-gi\u00f9 meccanico\n      const floatY = Math.sin(phase) * c.idleAmplitude;\n      const floatX = Math.cos(phase * 0.5) * c.idleAmplitude * 0.35;\n      const tilt = Math.sin(phase * 0.5) * c.idleRotation;\n\n      this.set({\n        x: floatX - this.current.x * c.pointerStrength,\n        y: floatY - this.current.y * c.pointerStrength * 0.6,\n        rotation: tilt + this.current.x * 0.35,\n      });\n    }\n  }\n\n  \/* ==========================================================================\n     Ingresso \u2014 le linee si disegnano, i marcatori scattano, i testi salgono.\n     \u00c8 la firma visiva del riferimento: senza, sembra una schermata fissa.\n     ========================================================================== *\/\n  function playIntro() {\n    if (reduced) return;\n\n    const lines = document.querySelectorAll('#reyLinks polyline');\n    lines.forEach((line) => {\n      const len = line.getTotalLength();\n      gsap.set(line, { strokeDasharray: len, strokeDashoffset: len });\n    });<\/p>\n<p>    gsap.timeline({\n      defaults: { ease: 'power3.out' },\n      \/\/ Durante l'ingresso i testi sono ancora sfalsati di qualche pixel: se in\n      \/\/ quel momento qualcosa ridisegna i collegamenti (es. ScrollTrigger.refresh)\n      \/\/ le linee restano agganciate alla posizione intermedia. Ridisegniamo a fine\n      \/\/ animazione, quando tutto \u00e8 al posto definitivo.\n      onComplete: drawLinks,\n    })\n      .from('#rey-hero .rey-grid, #rey-hero .rey-crosses', { opacity: 0, duration: 1.1 }, 0)\n      .from('#reyHeading',           { y: 26, opacity: 0, duration: 1 }, 0.1)\n      .from('#reyInner',             { opacity: 0, scale: 0.95, duration: 1.2 }, 0.15)\n      .to(lines,                     { strokeDashoffset: 0, duration: 0.9, stagger: 0.09 }, 0.5)\n      .from('#rey-hero .rey-dot',    { scale: 0, opacity: 0, duration: 0.5, stagger: 0.08, ease: 'back.out(2)' }, 0.8)\n      .from('#rey-hero .rey-annot',  { y: 12, opacity: 0, duration: 0.7, stagger: 0.08 }, 0.9)\n      .from('#reyThumb',             { scale: 0.85, opacity: 0, duration: 0.8 }, 0.95)\n      .from('#reyFoot',              { y: 14, opacity: 0, duration: 0.8 }, 1.05)\n      .from('#reyProgress',          { opacity: 0, duration: 0.6 }, 1.15);\n  }<\/p>\n<p>  \/* ==========================================================================\n     Avvio\n     ========================================================================== *\/\n  function start(canvas) {\n    gsap.registerPlugin(ScrollTrigger);<\/p>\n<p>    \/* Su telefono la comparsa\/scomparsa della barra dell'indirizzo genera un\n       resize: senza questo, ScrollTrigger ricalcola il pin a met\u00e0 scroll e\n       l'animazione \"salta\". Con ignoreMobileResize quei micro-resize verticali\n       vengono ignorati. *\/\n    ScrollTrigger.config({ ignoreMobileResize: true });<\/p>\n<p>    const hero = $('#rey-hero');\n    const stage = $('#reyStage');\n    const loader = $('#reyLoader');\n    const loaderFill = $('#reyLoaderFill');\n    const counter = $('#reyCounter');\n    const progressFill = $('#reyProgressFill');<\/p>\n<p>    buildCrosses();<\/p>\n<p>    const sequence = new FrameSequence(canvas, CONFIG);\n    const ambient = new AmbientMotion(canvas, CONFIG);<\/p>\n<p>    $('#reyTotal').textContent = String(sequence.frameCount);\n    \/\/ la mini-card mostra l'ultimo frame: il \"dopo\" accanto all'animazione in corso\n    const thumb = $('#reyThumbImg');\n    if (thumb) thumb.src = sequence.urlForIndex(sequence.frameCount - 1);<\/p>\n<p>    const redrawLinks = () => drawLinks();<\/p>\n<p>    sequence.load((p) => {\n      gsap.to(loaderFill, { scaleX: p, duration: 0.3, ease: 'power2.out', overwrite: true });\n    }).then(() => {\n      sequence.init();\n      sequence.setProgress(0);\n      \/* La barra \u00e8 animata con 0.3s di transizione: su connessioni veloci il\n         caricamento finisce prima che lei arrivi in fondo, e si vedrebbe\n         sparire a met\u00e0. La portiamo a fondo mentre parte la dissolvenza. *\/\n      gsap.to(loaderFill, { scaleX: 1, duration: 0.25, ease: 'power2.out', overwrite: true });\n      loader.dataset.done = 'true';<\/p>\n<p>      drawLinks();\n      addEventListener('resize', redrawLinks);\n      playIntro();<\/p>\n<p>      if (reduced) {\n        sequence.frameIndex = sequence.frameCount - 1;\n        sequence.redraw();\n        return;\n      }<\/p>\n<p>      ambient.init();<\/p>\n<p>      \/\/ Playhead proxy: lo scrub ammorbidisce QUESTO valore e da qui si\n      \/\/ disegnano i frame. Leggere il progress grezzo salterebbe lo smussamento.\n      const playhead = { progress: 0 };<\/p>\n<p>      const timeline = gsap.timeline({\n        scrollTrigger: {\n          trigger: hero,\n          start: 'top top',\n          end: 'bottom bottom',\n          scrub: CONFIG.scrub,\n          \/\/ PIN: lo stage resta inchiodato per tutta la sezione.\n          \/\/ pinSpacing:false perch\u00e9 l'altezza (400vh) fornisce gi\u00e0 lo scroll.\n          pin: stage,\n          pinSpacing: false,\n          pinType: 'fixed',\n          anticipatePin: 1,\n          \/* NIENTE invalidateOnRefresh: azzerava il playhead a ogni refresh\n             di ScrollTrigger e su mobile, tornando su dalla fine, faceva\n             lampeggiare il PRIMO frame prima di riallinearsi allo scroll.\n             Il tween \u00e8 un semplice 0\u21921: non c'\u00e8 nulla da ricalcolare. *\/\n          onRefresh: redrawLinks,\n        },\n      });<\/p>\n<p>      timeline.to(playhead, {\n        progress: 1,\n        ease: 'none',\n        duration: CONFIG.frameEnd,\n        onUpdate: () => {\n          sequence.setProgress(playhead.progress);\n          const current = Math.round(playhead.progress * (sequence.frameCount - 1)) + 1;\n          counter.textContent = String(current).padStart(3, '0');\n          gsap.set(progressFill, { scaleX: playhead.progress });\n        },\n      }, 0);<\/p>\n<p>      \/\/ coda: l'ultimo frame resta fermo e visibile fino a fine sezione\n      timeline.to({}, { duration: 1 - CONFIG.frameEnd }, CONFIG.frameEnd);<\/p>\n<p>      ScrollTrigger.refresh();\n      if (document.readyState !== 'complete') {\n        addEventListener('load', () => {\n          sequence.handleResize();\n          drawLinks();\n          ScrollTrigger.refresh();\n        });\n      }\n    });\n  }<\/p>\n<p>  let tries = 0;\n  function boot() {\n    const canvas = $('#reyCanvas');\n    let ready = false;\n    if (canvas) { if (typeof gsap !== 'undefined') { if (typeof ScrollTrigger !== 'undefined') ready = true; } }\n    if (!ready) {\n      if (tries++ < 60) setTimeout(boot, 100);\n      return;\n    }\n    start(canvas);\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', boot);\n  } else {\n    boot();\n  }\n})();\n<\/script><\/p>\n<\/div>\n<div>\n<section class=\"fm-reveal\">\n<div class=\"fm-reveal__sticky\">\n<p>    <!-- Griglia: 3 righe x 4 colonne (linee verticali a 25\/50\/75%,\n         come la griglia SVG della hero) --><\/p>\n<div class=\"fm-grid\" aria-hidden=\"true\">\n<div class=\"fm-grid__row\">\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<\/p><\/div>\n<div class=\"fm-grid__row\">\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<\/p><\/div>\n<div class=\"fm-grid__row\">\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<div class=\"fm-grid__cell\"><\/div>\n<\/p><\/div>\n<p>      <span class=\"fm-grid__hline fm-grid__hline--1\"><\/span><br \/>\n      <span class=\"fm-grid__hline fm-grid__hline--2\"><\/span>\n    <\/div>\n<div class=\"fm-reveal__row\">\n<p>      <!-- Tendina: il wrapper parte a width 0 e si allarga.\n           4 immagini impilate: la prima viene scoperta dalla tendina,\n           le successive subentrano in crossfade a ogni step.\n            SEGNAPOSTO: sostituisci i 4 src con le immagini caricate su WordPress. --><\/p>\n<div class=\"fm-reveal__media\">\n        <img decoding=\"async\" class=\"fm-reveal__img\" src=\"\/wp-content\/uploads\/2026\/09\/Green_leaf_surface_with_veins_2026080414314-1-1.jpeg\" alt=\"\"><br \/>\n        <img decoding=\"async\" class=\"fm-reveal__img\" src=\"\/wp-content\/uploads\/2026\/09\/c8ede2d5020e67741c333699a54e11e2.jpg\" alt=\"controllo\"><br \/>\n        <img decoding=\"async\" class=\"fm-reveal__img\" src=\"\/wp-content\/uploads\/2026\/08\/fresco-reytera-output.jpg\" alt=\"\"><br \/>\n        <img decoding=\"async\" class=\"fm-reveal__img\" src=\"\/wp-content\/uploads\/2026\/09\/Chamomile_and_leaves_in_liquid_2026090111551-1.jpeg\" alt=\"\">\n      <\/div>\n<p>      <!-- Blocco titolo: eyebrow \"[ 01. ]\" + heading con ry-blur --><\/p>\n<div class=\"fm-reveal__title-block\">\n<div class=\"uk-h5 uk-text-primary uk-margin-small-bottom uk-width-small fm-reveal__eyebrow\">[ 01. ]<\/div>\n<h2 class=\"uk-heading-large fm-reveal__title\">La natura cambia.<br \/>Il tuo prodotto non pu&ograve; permetterselo.<\/h2>\n<\/p><\/div>\n<p>      <!-- Blocco paragrafo: label-dot + paragrafo con classi del tema\n           (eredita font\/colore). NIENTE uk-parallax: nella sezione sticky\n           sbaglierebbe i calcoli, il fade-in identico lo fa la timeline. --><br \/>\n      <!-- 4 slide di testo impilate nella stessa cella: ne e' visibile una\n           alla volta, in sync con l'immagine corrispondente.\n            SEGNAPOSTO: sostituisci label e paragrafi degli step 2-4. --><\/p>\n<div class=\"fm-reveal__para-block\">\n<div class=\"fm-reveal__para-slide\">\n          <span class=\"label-dot fm-reveal__label\">Il problema<\/span><\/p>\n<div class=\"uk-panel paragrafo testi-effect fm-reveal__para\">Stagionalit&agrave;, origine geografica e filiere frammentate possono generare variazioni nella qualit&agrave; e nel profilo botanico da un raccolto all&rsquo;altro. Anche una materia prima di valore non basta: per tradurne il potenziale in un ingrediente coerente con le specifiche serve un processo di trasformazione dedicato.<\/div>\n<\/p><\/div>\n<div class=\"fm-reveal__para-slide\">\n          <span class=\"label-dot fm-reveal__label\">Continuit\u00e0 e controllo<\/span><\/p>\n<div class=\"uk-panel paragrafo testi-effect fm-reveal__para\"><strong>Lo stesso standard, nel tempo.<\/strong><br \/>\nIl controllo delle principali variabili, insieme a tracciabilit\u00e0 e analisi, riduce la dipendenza da stagionalit\u00e0, clima e origine, favorendo maggiore continuit\u00e0 tra i lotti.<\/div>\n<\/p><\/div>\n<div class=\"fm-reveal__para-slide\">\n          <span class=\"label-dot fm-reveal__label\">Scala industriale<\/span><\/p>\n<div class=\"uk-panel paragrafo testi-effect fm-reveal__para\"><strong>Volumi industriali. Costi competitivi a parit\u00e0 di standard.<\/strong><br \/>\nL\u2019impianto \u00e8 dimensionato per gestire produzioni industriali. Scala, automazione e integrazione del processo consentono di competere con alternative realmente comparabili per specifiche, qualit\u00e0, tracciabilit\u00e0, performance e continuit\u00e0 di fornitura.<\/div>\n<\/p><\/div>\n<div class=\"fm-reveal__para-slide\">\n          <span class=\"label-dot fm-reveal__label\">Sviluppo sul target<br \/>\n<\/span><\/p>\n<div class=\"uk-panel paragrafo testi-effect fm-reveal__para\"><strong>La qualit\u00e0 botanica, valorizzata dal processo.<\/strong><br \/>\nTecniche, veicoli e parametri vengono selezionati in funzione del risultato da ottenere, per renderlo coerente con il target e con i requisiti industriali indicati dal cliente.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<style>\n  \/* Palette (allineata al sito) e stato iniziale comune a fade opacity+blur.\n     Le regole con :where(...) hanno specificita' zero: sono fallback per i\n     test standalone, sul sito vincono sempre gli stili del tema. *\/\n  .fm-reveal {\n    --fm-bg: #DCE8E2;\n    --fm-line-color: rgba(255, 255, 255, 0.48);\n    height: 600vh;   \/* 4 step: intro + 3 cambi *\/\n    position: relative;\n    background: var(--fm-bg);\n  }<\/p>\n<p>  .fm-reveal__sticky {\n    position: sticky;\n    top: 0;\n    height: 100vh;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n  }<\/p>\n<p>  \/* ---------- Griglia ---------- *\/\n  .fm-grid {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    pointer-events: none;\n  }\n  .fm-grid__row { display: flex; }\n  \/* Fasce alta\/bassa uguali, fascia media (video) ~15% piu' piccola *\/\n  .fm-grid__row:nth-child(1) { height: 35%; }\n  .fm-grid__row:nth-child(2) { height: 30%; }\n  .fm-grid__row:nth-child(3) { height: 35%; }<\/p>\n<p>  \/* Cella: border-right = linea verticale. Height 0 -> 100% via GSAP. *\/\n  .fm-grid__cell {\n    width: 25%;\n    height: 0%;\n    background: var(--fm-bg);\n    border-right: 1px solid var(--fm-line-color);\n    will-change: height;\n  }\n  .fm-grid__cell:last-child { border-right: none; }<\/p>\n<p>  .fm-grid__hline {\n    position: absolute;\n    left: 0;\n    width: 100%;\n    height: 1px;\n    background: var(--fm-line-color);\n    opacity: 0;\n  }\n  .fm-grid__hline--1 { top: 35%; }\n  .fm-grid__hline--2 { top: 65%; }<\/p>\n<p>  \/* ---------- Contenuto ---------- *\/\n  .fm-reveal__row {\n    position: relative;\n    z-index: 2;                \/* sopra la griglia *\/\n    width: 100%;\n    height: 100%;\n  }<\/p>\n<p>  \/* Tendina: seconda colonna (25% -> 50%) x fascia centrale (35% -> 65%).\n     Width 0 iniziale, GSAP la porta a 25%; le immagini sotto hanno width\n     fissa e vengono scoperte. La width esatta in px la imposta il JS. *\/\n  .fm-reveal__media {\n    position: absolute;\n    left: 25%;\n    top: 35%;\n    height: 30%;\n    width: 0;\n    overflow: hidden;\n    will-change: width;\n  }\n  \/* Immagini impilate: assolute dentro la tendina, tutte a width fissa\n     (in px, scritta dal JS). La prima e' visibile, le altre entrano in\n     crossfade via GSAP (autoAlpha). *\/\n  .fm-reveal__img {\n    position: absolute;\n    left: 0;\n    top: 0;\n    display: block;\n    width: 25vw;         \/* fallback, sovrascritto dal JS *\/\n    max-width: none;     \/* alcuni temi WP mettono max-width:100% sui media *\/\n    height: 100%;\n    object-fit: cover;\n  }<\/p>\n<p>  \/* Blocco titolo: in alto a sinistra, sopra la cella del video *\/\n  .fm-reveal__title-block {\n    position: absolute;\n    left: 2.5vw;\n    right: 2.5vw;\n    top: 0;\n    padding-top: 60px;\n  }<\/p>\n<p>  \/* Eyebrow \"[ 01. ]\" \u2014 stile ereditato da .uk-h5.uk-text-primary del tema *\/\n  .fm-reveal__eyebrow {\n    font-weight: bold !important;\n    opacity: 0;\n    filter: blur(10px);\n    will-change: filter, opacity;\n  }\n  :where(.fm-reveal__eyebrow) {\n    font-family: 'Aptos', sans-serif;\n    font-size: 15px;\n    color: #277b67;\n    width: 150px;\n    margin-bottom: 10px;\n  }<\/p>\n<p>  \/* Titolo \u2014 stile da .uk-heading-large del tema; qui colore + stato iniziale *\/\n  .fm-reveal__title {\n    margin: 0;\n    color: #192b35 !important;\n    opacity: 0;\n  }\n  :where(.fm-reveal__title) {\n    font-family: 'Aptos-Light', 'Aptos', sans-serif;\n    font-size: clamp(2.2rem, 4.4vw, 3.7rem);\n    line-height: 1.1;\n    font-weight: 300;\n    letter-spacing: -0.046em;\n  }<\/p>\n<p>  \/* Blocco paragrafo: dalla prima linea verticale al bordo destro,\n     ancorato al fondo per centrarlo nella fascia bassa *\/\n  .fm-reveal__para-block {\n    position: absolute;\n    left: 50%;                 \/* comincia dalla seconda linea verticale (colonna 3) *\/\n    right: 2.5vw;\n    bottom: 15vh;\n    padding-left: 20px;        \/* respiro dalla linea verticale della griglia *\/\n    display: grid;             \/* le slide si impilano nella stessa cella *\/\n  }<\/p>\n<p>  \/* Slide di testo: tutte nella stessa cella grid, la piu' alta detta\n     l'altezza del blocco cosi' il layout non salta ai cambi di step. *\/\n  .fm-reveal__para-slide {\n    grid-area: 1 \/ 1;\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n   @media (min-width: 1440px) and (max-width: 1599px) {\n .fm-reveal__para-block {\n    position: absolute;\n    left: 50%;  \n      bottom: 10vh;\n }\n    }\n@media screen and (max-width: 1200px){\n .fm-reveal__para-block {\n    position: absolute;\n    left: 50%;  \n      bottom: 10vh;\n }\n}<\/p>\n<p>  \/* Label-dot \"Il problema\" \u2014 stile ereditato da .label-dot del tema *\/\n  .fm-reveal__label {\n    opacity: 0;\n    filter: blur(10px);\n    will-change: filter, opacity;\n  }\n  :where(.fm-reveal__label) {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-family: 'Aptos', sans-serif;\n    font-size: 15px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    color: #3e6f62;\n  }\n  :where(.fm-reveal__label)::before {\n    content: '';\n    display: inline-block;\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: #3e6f62;\n  }<\/p>\n<p>  \/* Paragrafo \u2014 stile da .paragrafo del tema (Aptos 18\/1.5) *\/\n  .fm-reveal__para {\n    color: #192b35 !important;\n    opacity: 0;\n    filter: blur(10px);\n    will-change: filter, opacity;\n  }\n  :where(.fm-reveal__para) {\n    font-family: 'Aptos', sans-serif;\n    font-size: 18px;\n    line-height: 1.5;\n    font-weight: 400;\n  }<\/p>\n<p>  \/* Tablet: la tendina prende 2 colonne su 4 come da mobile. Il layout\n     resta quello desktop (blocchi in absolute), cambia solo la larghezza.\n     Questa width e' solo il fallback: quella reale in px la scrive il JS. *\/\n  @media (min-width: 769px) and (max-width: 1200px) {\n    .fm-reveal__img { width: 50vw; }\n  }<\/p>\n<p>  \/* ---------- Mobile ----------\n     Il contenuto esce dal posizionamento assoluto e va in flusso normale:\n     titolo -> video -> paragrafo, impilati. Il paragrafo sta quindi sempre\n     sotto al video ed e' allineato a sinistra come il titolo (6%). *\/\n  @media (max-width: 768px) {\n    .fm-reveal { height: 500vh; }  \/* 4 step *\/<\/p>\n<p>    \/* Su iOS 100vh include la zona dietro la barra del browser: con svh\n       le fasce si calcolano sull'area davvero visibile (chi non supporta\n       svh ignora la riga e tiene il 100vh della regola base). *\/\n    .fm-reveal__sticky { height: 100svh; }<\/p>\n<p>    \/* Fasce ricalibrate: immagine piu' bassa e meta' schermo al testo,\n       cosi' il paragrafo sale e resta leggibile anche coi testi lunghi. *\/\n    .fm-grid__row:nth-child(1) { height: 30%; }\n    .fm-grid__row:nth-child(2) { height: 20%; }\n    .fm-grid__row:nth-child(3) { height: 50%; }\n    .fm-grid__hline--1 { top: 30%; }\n    .fm-grid__hline--2 { top: 50%; }<\/p>\n<p>    .fm-reveal__row {\n      display: flex;\n      flex-direction: column;\n    }\n    \/* border-box: senza, il flex-basis non conta il padding e la fascia\n       del titolo sfora, sfasando il video rispetto alle linee della griglia. *\/\n    .fm-reveal__title-block,\n    .fm-reveal__media,\n    .fm-reveal__para-block {\n      box-sizing: border-box;\n    }<\/p>\n<p>    \/* order: il titolo sta prima del video nel layout pur restando dopo\n       nel markup (il markup non cambia, cosi' il desktop resta identico). *\/\n    .fm-reveal__title-block {\n      order: 1;\n      position: relative;\n      left: auto;\n      right: auto;\n      top: -20px;\n      flex: 0 0 30%;\n      padding: 40px 5% 0;\n    }<\/p>\n<p>    .fm-reveal__media {\n      order: 2;\n      position: relative;   \/* in flusso, ma resta containing block delle img assolute *\/\n      left: auto;\n      top: auto;\n      flex: 0 0 20%;\n      height: 20%;\n      align-self: flex-start;\n      margin-left: 25%;        \/* resta agganciata alla prima linea verticale *\/\n    }\n    .fm-reveal__img { width: 50vw; }<\/p>\n<p>    \/* Non piu' absolute: sta nel flusso, subito dopo il video, e usa lo\n       stesso inset orizzontale del blocco titolo. *\/\n    .fm-reveal__para-block {\n      order: 3;\n      position: relative;\n      left: auto;\n      right: auto;\n      bottom: auto;\n      flex: 1 1 50%;\n      min-height: 0;\n      align-content: start;    \/* il testo parte subito sotto l'immagine *\/\n      padding: 26px 2% 0 5%;\n    }<\/p>\n<p>    :where(.fm-reveal__title) { font-size: clamp(1.4rem, 5.5vw, 2rem); }\n    :where(.fm-reveal__para) { font-size: 16px; }\n  }\n<\/style>\n<p><script>\n(function () {\n  'use strict';<\/p>\n<p>  var MEDIA_FRAC_DESKTOP = 0.25;   \/* 1 colonna su 4 *\/\n  var MEDIA_FRAC_NARROW = 0.5;     \/* 2 colonne su 4: mobile E tablet *\/\n  var NARROW_MQ = '(max-width: 1200px)';  \/* stessa soglia tablet del CSS *\/\n  var BLUR_START = 10;<\/p>\n<p>  \/* GSAP dovrebbe esserci sempre grazie al plugin del tema. Come rete\n     di sicurezza per l'apertura del file standalone, se dopo il load\n     manca ancora, si carica da CDN. *\/\n  var gsapLoading = false;\n  function ensureGsap(done) {\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') return done();\n    if (document.readyState !== 'complete') {\n      window.addEventListener('load', function () { ensureGsap(done); }, { once: true });\n      return;\n    }\n    if (gsapLoading) return;\n    gsapLoading = true;\n    var base = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/';\n    function load(src, next) {\n      var s = document.createElement('script');\n      s.src = base + src;\n      s.onload = next;\n      document.head.appendChild(s);\n    }\n    load('gsap.min.js', function () {\n      load('ScrollTrigger.min.js', function () {\n        load('SplitText.min.js', done);\n      });\n    });\n  }<\/p>\n<p>  \/* Lenis: il tema ha gia' il suo raf loop, qui serve solo la\n     sincronizzazione con ScrollTrigger. Se il tema espone window.lenis\n     lo agganciamo; altrimenti scroll nativo. *\/\n  function integrateLenis() {\n    var lenis = window.lenis;\n    if (!lenis || typeof lenis.on !== 'function') return window;<\/p>\n<p>    var wrapper = (lenis.options && lenis.options.wrapper) || window;\n    var isWindowScroll = wrapper === window || wrapper === document.documentElement || wrapper === document.body;<\/p>\n<p>    if (isWindowScroll) {\n      lenis.on('scroll', ScrollTrigger.update);\n      return window;\n    }<\/p>\n<p>    \/* Lenis su wrapper custom -> scrollerProxy *\/\n    ScrollTrigger.scrollerProxy(wrapper, {\n      scrollTop: function (value) {\n        if (arguments.length) lenis.scrollTo(value, { immediate: true });\n        return lenis.scroll || 0;\n      },\n      getBoundingClientRect: function () {\n        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };\n      },\n      pinType: wrapper.style.transform ? 'transform' : 'fixed'\n    });\n    lenis.on('scroll', ScrollTrigger.update);\n    ScrollTrigger.defaults({ scroller: wrapper });\n    ScrollTrigger.refresh();\n    return wrapper;\n  }<\/p>\n<p>  \/* Effetto ry-blur sul titolo: SplitText per carattere, messa a fuoco\n     da blur 10px con stagger casuale (identico ai titoli del sito).\n     Ritorna la funzione da chiamare (una volta sola). *\/\n  function makeTitleReveal(titleEl, allowBlur) {\n    var fired = false;\n    return function () {\n      if (fired) return;\n      fired = true;<\/p>\n<p>      if (typeof SplitText === 'undefined') {\n        gsap.to(titleEl, { opacity: 1, duration: 0.8, ease: 'power2.out' });\n        return;\n      }<\/p>\n<p>      var chars = new SplitText(titleEl, { type: 'words, chars' }).chars;\n      gsap.set(chars, allowBlur\n        ? { opacity: 0, filter: 'blur(' + BLUR_START + 'px)', willChange: 'filter, opacity' }\n        : { opacity: 0 });\n      gsap.set(titleEl, { opacity: 1 });<\/p>\n<p>      gsap.to(chars, {\n        opacity: 1,\n        filter: allowBlur ? 'blur(0px)' : 'none',\n        ease: 'power2.out',\n        duration: 1,\n        stagger: { amount: 0.3, from: 'random' },\n        onComplete: function () {\n          gsap.set(chars, { clearProps: 'filter,willChange' });\n        }\n      });\n    };\n  }<\/p>\n<p>  function init() {\n    gsap.registerPlugin(ScrollTrigger);\n    var scroller = integrateLenis();<\/p>\n<p>    \/* Larghezza finale della tendina = 1 colonna desktop, 2 su mobile.\n       La width in px del video la calcoliamo dal contenitore reale\n       (i vw includono la scrollbar e sfalserebbero l'incastro). *\/\n    var isNarrow = window.matchMedia(NARROW_MQ).matches;\n    var mediaFrac = isNarrow ? MEDIA_FRAC_NARROW : MEDIA_FRAC_DESKTOP;\n    var rowEl = document.querySelector('.fm-reveal__row');\n    var imgEls = gsap.utils.toArray('.fm-reveal__img');\n    var slideEls = gsap.utils.toArray('.fm-reveal__para-slide');<\/p>\n<p>    function sizeMedia() {\n      var w = (rowEl.clientWidth * mediaFrac) + 'px';\n      imgEls.forEach(function (img) { img.style.width = w; });\n    }\n    sizeMedia();<\/p>\n<p>    var resizeTO;\n    window.addEventListener('resize', function () {\n      clearTimeout(resizeTO);\n      resizeTO = setTimeout(sizeMedia, 100);\n    });<\/p>\n<p>    \/* Stato iniziale degli step: visibili solo la prima immagine e la\n       prima slide di testo (autoAlpha = opacity + visibility). *\/\n    gsap.set(imgEls.slice(1), { autoAlpha: 0 });\n    gsap.set(slideEls.slice(1), { autoAlpha: 0 });<\/p>\n<p>    \/* Timeline scrubbata: griglia -> tendina -> testi -> step 2..4 *\/\n    var tl = gsap.timeline({\n      scrollTrigger: {\n        trigger: '.fm-reveal',\n        scroller: scroller,\n        start: 'top center',\n        end: 'bottom bottom',\n        scrub: 0.8\n        \/* markers: true *\/\n      }\n    });<\/p>\n<p>    \/* Griglia: le linee verticali scendono colonna per colonna da destra *\/\n    tl.to('.fm-grid__cell', {\n      height: '100%',\n      stagger: { each: 0.08, from: 'end', grid: [3, 4], axis: 'x' },\n      ease: 'none',\n      duration: 0.5\n    }, 0);<\/p>\n<p>    \/* Linee orizzontali *\/\n    tl.to('.fm-grid__hline', { opacity: 1, ease: 'none', duration: 0.3 }, 0.7);<\/p>\n<p>    \/* Eyebrow \"[ 01. ]\" (poco prima del titolo) *\/\n    tl.to('.fm-reveal__eyebrow', { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.5 }, 1.0);<\/p>\n<p>    \/* Tendina: il wrapper si allarga scoprendo la prima immagine *\/\n    tl.to('.fm-reveal__media', { width: (mediaFrac * 100) + '%', ease: 'none', duration: 1 }, 1.0);<\/p>\n<p>    \/* Titolo con ry-blur: time-based, una volta sola quando la tendina e' quasi aperta *\/\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var allowBlur = !reduced && (navigator.deviceMemory ? navigator.deviceMemory >= 4 : true);\n    var titleEl = document.querySelector('.fm-reveal__title');\n    if (reduced) {\n      gsap.set(titleEl, { opacity: 1 });\n    } else {\n      tl.call(makeTitleReveal(titleEl, allowBlur), [], 1.15);\n    }<\/p>\n<p>    \/* Label-dot + paragrafo del primo step, con lo stesso fade\n       opacity+blur di prima (scoped alla slide 1: le altre slide hanno\n       le stesse classi e partono ai cambi di step). *\/\n    tl.to(slideEls[0].querySelector('.fm-reveal__label'), { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.5 }, 1.4);\n    tl.to(slideEls[0].querySelector('.fm-reveal__para'),  { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.6 }, 1.55);<\/p>\n<p>    \/* ---- Step 2..4: crossfade immagine + cambio testo ----\n       Ogni step: pausa di lettura, poi il testo corrente esce, l'immagine\n       successiva entra in crossfade (e' sopra nel DOM, quindi copre la\n       precedente) e il nuovo testo appare con lo stesso fade opacity+blur\n       del primo. Tutto scrubbato: tornando indietro si riavvolge. *\/\n    var SWAP_START = 2.95;   \/* fine della pausa di lettura del primo testo *\/\n    var SWAP_EVERY = 1.35;   \/* transizione + pausa di lettura di ogni step *\/<\/p>\n<p>    for (var i = 1; i < slideEls.length; i++) {\n      var t = SWAP_START + (i - 1) * SWAP_EVERY;\n\n      \/* immagini: la successiva sfuma sopra, poi la vecchia si spegne *\/\n      tl.to(imgEls[i],     { autoAlpha: 1, ease: 'none', duration: 0.5 }, t);\n      tl.to(imgEls[i - 1], { autoAlpha: 0, ease: 'none', duration: 0.4 }, t + 0.15);\n\n      \/* testo: esce il vecchio, entra il nuovo *\/\n      tl.to(slideEls[i - 1], { autoAlpha: 0, ease: 'none', duration: 0.35 }, t);\n      tl.set(slideEls[i], { autoAlpha: 1 }, t + 0.35);\n      tl.to(slideEls[i].querySelector('.fm-reveal__label'), { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.4 }, t + 0.4);\n      tl.to(slideEls[i].querySelector('.fm-reveal__para'),  { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.5 }, t + 0.5);\n    }\n\n    \/* Pausa finale: l'ultimo step resta visibile per l'ultimo tratto di scroll *\/\n    tl.to({}, { duration: 0.8 });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function () { ensureGsap(init); });\n  } else {\n    ensureGsap(init);\n  }\n})();\n<\/script><\/p>\n<\/div>\n<div>[ 02. ]<\/div>\n<h3>Un\u2019unica piattaforma.<br \/>\nPi\u00f9 possibilit\u00e0 di risultato.<br \/>\n<\/h3>\n<div>\n<style>\n.rey-video-mask-seme {\n  position: relative;\n  display: block;\n  width: 450px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-seme video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-seme::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-seme::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(245, 247, 244, 0) 50%,\n      rgba(245, 247, 244, 1) 72%,\n      rgba(245, 247, 244, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-seme\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-seme-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Selezione botanica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">La matrice vegetale viene individuata in funzione del target da raggiungere.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\"><span class=\"ry-tooltip__title label-dot\">Origine controllata<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Origine e caratteristiche della materia prima vengono considerate per ridurre le variabili lungo il processo.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Selezione botanica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Origine controllata<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nOrigine e caratteristiche della materia prima vengono considerate per ridurre le<br \/>\nvariabili lungo il processo.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Sviluppo su specifica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Sviluppo su specifica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto. <\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div><span class=\"label-dot\">LA PIATTAFORMA<\/span><\/div>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<h3>Seme<\/h3>\n<div>Ogni progetto parte dalla selezione della botanica pi\u00f9 coerente con il profilo e le<br \/>\nprestazioni richieste. La scelta non nasce da un catalogo predefinito, ma dall\u2019obiettivo<br \/>\ncondiviso con il cliente.<\/div>\n<div>\n<style>\n.rey-video-mask-col {\n  position: relative;\n  display: block;\n  width: 500px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-col video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-col::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-col::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(220, 232, 226, 0) 50%,\n      rgba(220, 232, 226, 1) 72%,\n      rgba(220, 232, 226, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-col\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-coltivazione-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Luce<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nSpettro e intensit\u00e0 vengono regolati in funzione delle fasi di sviluppo e del profilo<br \/>\ntarget.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Fertirrigazione<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nNutrienti e irrigazione vengono gestiti con precisione nelle diverse fasi di crescita.<br \/>\n<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Temperatura<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa temperatura viene controllata per ridurre la dipendenza da clima e stagionalit\u00e0 e favorire la ripetibilit\u00e0 della matrice botanica.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Umidit\u00e0<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nL\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il<br \/>\nprofilo target.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"up\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Umidit\u00e0<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">L\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il<br \/>\nprofilo target.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div><span class=\"label-dot\">LA PIATTAFORMA<\/span><\/div>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<h3>Coltivazione<\/h3>\n<div>In ambiente controllato, luce, fertirrigazione, umidit\u00e0 e temperatura vengono gestite per favorire un profilo fitochimico coerente con il target e migliorare la ripetibilit\u00e0 tra i lotti. Una volta definito il protocollo agronomico, il profilo ottenuto diventa distintivo e riproducibile, offrendo al cliente un concreto elemento di differenziazione e innovazione.<\/div>\n<div>\n<style>\n.rey-video-mask-seme {\n  position: relative;\n  display: block;\n  width: 450px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-seme video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-seme::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-seme::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(245, 247, 244, 0) 50%,\n      rgba(245, 247, 244, 1) 72%,\n      rgba(245, 247, 244, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-seme\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-fresco-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div><span class=\"label-dot\">LA PIATTAFORMA<\/span><\/div>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<h3>Fresco<\/h3>\n<div>La botanica nella sua forma fresca.<\/div>\n<div>Materia botanica coltivata in ambiente controllato, con caratteristiche definite, ripetibili e tracciabili in funzione delle specifiche del progetto.<\/div>\n<div>\n<style>\n.rey-video-mask-col {\n  position: relative;\n  display: block;\n  width: 500px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-col video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-col::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-col::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(220, 232, 226, 0) 50%,\n      rgba(220, 232, 226, 1) 72%,\n      rgba(220, 232, 226, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-col\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-essicato-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div><span class=\"label-dot\">LA PIATTAFORMA<\/span><\/div>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<h3>Essiccazione<\/h3>\n<div>La botanica essiccata attraverso un processo controllato.<\/div>\n<div>\nL\u2019essiccazione a letto continuo, a temperatura controllata e con grado di essiccazione regolabile, consente di modulare le caratteristiche della matrice in funzione dell\u2019obiettivo del progetto.<\/div>\n<div>\n<style>\n.rey-video-mask-seme {\n  position: relative;\n  display: block;\n  width: 450px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-seme video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-seme::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-seme::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(245, 247, 244, 0) 50%,\n      rgba(245, 247, 244, 1) 72%,\n      rgba(245, 247, 244, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-seme\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-liquido-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Tecniche selezionate<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Il metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\"><span class=\"ry-tooltip__title label-dot\">Tecniche selezionate<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Il metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Veicoli dedicati<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Concentrazione e standardizzazione<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nIl processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Veicoli dedicati<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa scelta del veicolo o del solvente \u00e8 parte integrante dello sviluppo. <\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"up\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Concentrazione e standardizzazione<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Il processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"up\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Formati su specifica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"up\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Formati su specifica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div><span class=\"label-dot\">LA PIATTAFORMA<\/span><\/div>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<h3>Estrazione<\/h3>\n<div>La botanica trasformata in ingrediente.<\/div>\n<div>\nA partire da matrici botaniche fresche o essiccate, attraverso processi dedicati sviluppiamo estratti liquidi o in polvere, standardizzati in funzione delle specifiche del progetto.<\/div>\n<div>[ 01. ]<\/div>\n<h3>Un\u2019unica piattaforma.<br \/>\nPi\u00f9 possibilit\u00e0 di risultato.<br \/>\n<\/h3>\n<div>\/ 01<\/div>\n<div>LA PIATTAFORMA\n<\/div>\n<div>\n<style>\n.rey-video-mask-seme-mob2 {\n  position: relative;\n  display: block;\n  width: 350px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-seme-mob2 video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-seme-mob2::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(241, 244, 240, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(241, 244, 240, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px; \n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-seme-mob2::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(241, 244, 240, 0) 50%,\n      rgba(241, 244, 240, 1) 72%,\n      rgba(241, 244, 240, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-seme-mob2\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/07\/video5-350p.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Selezione Botanica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\"><span class=\"ry-tooltip__title label-dot\">Origine controllata<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Origine e caratteristiche della materia prima vengono considerate per ridurre le variabili lungo il processo.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Sviluppo su specifica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<h3>Seme<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div>Ogni progetto parte dalla selezione della botanica pi\u00f9 coerente con il profilo e le prestazioni richieste. La scelta non nasce da un catalogo predefinito, ma dall\u2019obiettivo condiviso con il cliente.\n<\/div>\n<div>\/ 02<\/div>\n<div>LA PIATTAFORMA\n<\/div>\n<div>\n<style>\n.rey-video-mask-col-mob {\n  position: relative;\n  display: block;\n  width: 300px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-col-mob video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-col-mob::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-col-mob::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(220, 232, 226, 0) 50%,\n      rgba(220, 232, 226, 1) 72%,\n      rgba(220, 232, 226, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-col-mob\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-coltivazione-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Luce<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nSpettro e intensit\u00e0 vengono regolati in funzione delle fasi di sviluppo e del profilo<br \/>\ntarget.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Fertirrigazione<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nNutrienti e irrigazione vengono gestiti con precisione nelle diverse fasi di crescita.<br \/>\n<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Umidit\u00e0<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nL\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il<br \/>\nprofilo target.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"up\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Temperatura<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa temperatura viene controllata per ridurre la dipendenza da clima e stagionalit\u00e0 e favorire la ripetibilit\u00e0 della matrice botanica.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<h3>Coltivazione<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div>\nIn ambiente controllato, luce, fertirrigazione, umidit\u00e0 e temperatura vengono gestite per favorire un profilo fitochimico coerente con il target e migliorare la ripetibilit\u00e0 tra i lotti. Una volta definito il protocollo agronomico, il profilo ottenuto diventa distintivo e riproducibile, offrendo al cliente un concreto elemento di differenziazione e innovazione.<\/div>\n<div>\/ 03<\/div>\n<div>LA PIATTAFORMA\n<\/div>\n<div>\n<style>\n.rey-video-mask-fresco {\n  position: relative;\n  display: block;\n  width: 350px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-fresco video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-fresco::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(241, 244, 240, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(241, 244, 240, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-fresco::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(241, 244, 240, 0) 50%,\n      rgba(241, 244, 240, 1) 72%,\n      rgba(241, 244, 240, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-fresco\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-fresco-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<h3>Fresco<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div>\n<p><strong>La botanica nella sua forma fresca.<\/strong><br \/>Materia botanica coltivata in ambiente controllato, con caratteristiche definite, ripetibili e tracciabili in funzione delle specifiche del progetto.<\/p>\n<\/div>\n<div>\/ 04<\/div>\n<div>LA PIATTAFORMA\n<\/div>\n<div>\n<style>\n.rey-video-mask-essicato {\n  position: relative;\n  display: block;\n  width: 300px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-essicato video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-essicato::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-essicato::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(220, 232, 226, 0) 50%,\n      rgba(220, 232, 226, 1) 72%,\n      rgba(220, 232, 226, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-essicato\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-essicato-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<h3>Essiccazione<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div>\n<p><strong>La botanica essiccata attraverso un processo controllato.<\/strong><br \/>L\u2019essiccazione a letto continuo, a temperatura controllata e con grado di essiccazione regolabile, consente di modulare le caratteristiche della matrice in funzione dell\u2019obiettivo del progetto.<\/p>\n<\/div>\n<div>\/ 05<\/div>\n<div>LA PIATTAFORMA\n<\/div>\n<div>\n<style>\n.rey-video-mask-estrato {\n  position: relative;\n  display: block;\n  width: 350px;\n  max-width: 100%;\n  margin: 0 auto;\n  aspect-ratio: 1 \/ 1;\n  overflow: hidden;\n  line-height: 0;\n}<\/p>\n<p>.rey-video-mask-estrato video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}<\/p>\n<p>\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\n.rey-video-mask-estrato::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;<\/p>\n<p>  \/* griglia: due linee sottili verdi semi-trasparenti *\/\n  background-image:\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/<\/p>\n<p>  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\n  -webkit-mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n          mask: radial-gradient(circle at center,\n      transparent 30%,\n      #000 50%,\n      #000 62%,\n      transparent 85%);\n}<\/p>\n<p>\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\n.rey-video-mask-estrato::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: radial-gradient(circle at center,\n      rgba(241, 244, 240, 0) 50%,\n      rgba(241, 244, 240, 1) 72%,\n      rgba(241, 244, 240, 1) 100%);\n}\n<\/style>\n<div class=\"rey-video-mask-estrato\">\n  <video \n    src=\"\/wp-content\/uploads\/2026\/08\/video-liquido-500.mp4\"\n    autoplay loop muted playsinline preload=\"auto\"><\/video>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip>\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Veicoli dedicati<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Tecniche selezionate<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nIl metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<br \/>\n<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"left\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Concentrazione e standardizzazione<\/span><br \/>\n      <span class=\"ry-tooltip__desc\"><br \/>\nIl processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<div>\n<div class=\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\" data-tooltip data-tooltip-position=\"up\">\n  <button class=\"ry-tooltip__trigger\" type=\"button\" aria-expanded=\"false\"><br \/>\n    <span class=\"ry-tooltip__icon\" aria-hidden=\"true\"><\/span><br \/>\n  <\/button><\/p>\n<div class=\"ry-tooltip__panel\" role=\"tooltip\">\n    <span class=\"ry-tooltip__line\" aria-hidden=\"true\"><\/span><\/p>\n<div class=\"ry-tooltip__text\">\n      <span class=\"ry-tooltip__title label-dot\">Formati su specifica<\/span><br \/>\n      <span class=\"ry-tooltip__desc\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\n    <\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<h3>Estrazione<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div>\n<p><strong>La botanica trasformata in ingrediente.<\/strong><br \/>A partire da matrici botaniche fresche o essiccate, attraverso processi dedicati sviluppiamo estratti liquidi o in polvere, standardizzati in funzione delle specifiche del progetto.<\/p>\n<\/div>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div><span class=\"label-dot\">IL RISULTATO<\/span><\/div>\n<div>[ 03. ]<\/div>\n<h3>Output della filiera.<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div><span class=\"label-dot\">IL RISULTATO<\/span><\/div>\n<div>Reytera porta la materia botanica nel formato pi\u00f9 coerente con il processo del cliente.<br \/>\nOutput diversi, sviluppati per integrarsi in formulazioni, applicazioni e processi industriali<br \/>\ndifferenti.<\/div>\n<ul>\n<li>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/estratto-polvere-reytera-1.jpg\" alt=\"\"><\/p>\n<h3>Estratto in polvere<\/h3>\n<p>OUTPUT FINALE<\/p>\n<div>Un estratto concentrato e titolato, ottenuto attraverso processi dedicati e standardizzato in<br \/>\nforma stabile secondo le specifiche del progetto.<\/div>\n<\/li>\n<li>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/Oil_droplets_in_liquid_suspension_202608061245-1-1-1.jpg\" alt=\"\"><\/p>\n<h3>Estratto liquido<\/h3>\n<p>OUTPUT FINALE<\/p>\n<div>Un estratto ottenuto attraverso tecniche e veicoli selezionati in funzione della botanica, del profilo richiesto e delle specifiche del progetto.<\/div>\n<\/li>\n<li>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/olio-essenziali-reytera-1.jpg\" alt=\"\"><\/p>\n<h3>Oli essenziali e assolute<\/h3>\n<p>OUTPUT FINALE<\/p>\n<div>Frazioni aromatiche concentrate, ottenute attraverso processi dedicati per preservare e<br \/>\nvalorizzare il profilo caratteristico della botanica.<\/div>\n<\/li>\n<li>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/output-fresco-reytera.jpg\" alt=\"\"><\/p>\n<h3>Fresco<\/h3>\n<p>OUTPUT FINALE<\/p>\n<div>Materia botanica fresca, coltivata in ambiente controllato, tracciabile e caratterizzata<br \/>\nsecondo le specifiche del progetto.<\/div>\n<\/li>\n<li>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/essicato-reytera-output-_1_.webp\" alt=\"\"><\/p>\n<h3>Essiccato<\/h3>\n<p>OUTPUT FINALE<\/p>\n<div>Materia botanica essiccata a letto continuo, a temperatura controllata e con grado di<br \/>\nessiccazione regolabile in funzione delle specifiche del progetto.<\/div>\n<\/li>\n<\/ul>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<h5>DALLA STESSA FILIERA<\/h5>\n<h5>UN'UNICA PIATTAFORMA<\/h5>\n<h5>UN'UNICA<\/h5>\n<h5>PIATTAFORMA<\/h5>\n<div>[ 04. ]<\/div>\n<h3>Tre criteri per trasformare<br class=\"uk-visible@m\"><br \/>\n la botanica in valore industriale.<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div><span class=\"label-dot\">I TRE PILASTRI<br \/>\n<\/span><\/div>\n<div>Ogni progetto integra performance, compliance e sostenibilit\u00e0: <br class=\"uk-visible@xl\">tre criteri complementari<br \/>\nper sviluppare output affidabili, utilizzabili e coerenti con i requisiti industriali.<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/linktree-logo-light.svg\" alt=\"\"><\/p>\n<h3>Performance<\/h3>\n<div>\n<p><strong>Prestazioni costruite sulle specifiche del progetto.<\/strong><br \/>Standardizzazione produttiva, sviluppo su specifica, titolazione e caratterizzazione chimica consentono di ottenere output coerenti con i parametri definiti e, quando previsto, di<br \/>\nvalutarne le performance attraverso test dedicati in vitro e in vivo.<\/p>\n<\/div>\n<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/folder-lock-light.svg\" alt=\"\"><\/p>\n<h3>Compliance<\/h3>\n<div>\n<p><strong>Conformit\u00e0 lungo tutto il processo.<\/strong><br \/>La valutazione del profilo di sicurezza, la tracciabilit\u00e0 e il presidio regolatorio interno accompagnano ogni fase dello sviluppo, fino alla predisposizione della documentazione tecnica necessaria per l\u2019impiego industriale.<\/p>\n<\/div>\n<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/07\/plant-light.svg\" alt=\"\"><\/p>\n<h3>Sostenibilit\u00e0<\/h3>\n<div>\n<p><strong>Efficienza che nasce dal processo.<\/strong><br \/>\nTecnologie e processi dedicati consentono di ridurre l\u2019uso di suolo e il consumo idrico,<br \/>\nrecuperare parte della biomassa vegetale e impiegare solventi a minore impatto, quando<br \/>\ncompatibili con le specifiche del progetto.<\/p>\n<\/div>\n<\/div>\n<div><span class=\"label-dot\">TECNOLOGIA<\/span><\/div>\n<div>[ 05. ]<\/div>\n<div>\n<style id=\"reytera-technology-css\">\/* =========================================================================\r\n   Reytera \u2014 sezione Technology\r\n   Tutto \u00e8 dentro il namespace .rt-tech e non tocca nulla fuori.\r\n\r\n   Due scelte obbligate su WordPress:\r\n   1. NIENTE regole su html\/body. La versione standalone usava\r\n      html{font-size:10px} per avere 1rem = 10px: dentro un tema\r\n      riscalerebbe la tipografia dell'intero sito. Qui \u00e8 tutto in px.\r\n   2. Ogni selettore parte da .rt-tech, cos\u00ec i temi aggressivi non entrano\r\n      e noi non usciamo.\r\n   ========================================================================= *\/\r\n\r\n.rt-tech {\r\n  \/* --- colori: cambiali qui, si propagano ovunque --- *\/\r\n  --rt-ink: #192B35;\r\n  --rt-ink-800: #3E6F62;\r\n  --rt-paper-soft: #e8e9f5;\r\n\r\n  \/* --- geometria --- *\/\r\n  --rt-header-h: 50px;   \/* sovrascritto dallo shortcode: altezza header del tema *\/\r\n  --rt-gutter: 20px;\r\n  --rt-gap: 20px;\r\n  \/* Stacco fra il bordo della sezione e la prima linea orizzontale.\r\n     La linea verticale parte da qui, non da zero, altrimenti sporge\r\n     sopra l'orizzontale invece di incrociarla. *\/\r\n  --rt-head-pad: 0px;\r\n  \/* Quanto scroll dura un singolo step. Con molti step conviene abbassarlo,\r\n     altrimenti la sezione diventa lunghissima. *\/\r\n  --rt-step-h: 150vh;\r\n  \/* Spazio verticale occupato da tutto ci\u00f2 che NON \u00e8 uno step: testata,\r\n     descrizione dello step attivo, bottone e margini. Misurato ~284px, qui\r\n     tenuto largo per assorbire titoli su due righe e descrizioni lunghe.\r\n     Serve a calcolare quanto respiro possono prendersi gli step senza far\r\n     uscire il CTA dalla sezione. *\/\r\n  --rt-chrome: 540px;\r\n\r\n  \/* Curva con overshoot morbido, usata dalle micro-interazioni del bottone *\/\r\n  --rt-ease: cubic-bezier(0.68, -0.55, 0.27, 1.55);\r\n\r\n  \/* Aptos in testa: se il tema lo ha caricato viene usato, altrimenti si\r\n     scende sul grotesque di sistema. Con font=\"inherit\" eredita dal tema. *\/\r\n  --rt-font: Aptos, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  color: var(--rt-ink);\r\n  font-family: var(--rt-font);\r\n  font-size: 15px;\r\n  line-height: 1.2;\r\n  font-weight: 400;\r\n  padding: 0 var(--rt-gutter);\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.rt-tech *,\r\n.rt-tech *::before,\r\n.rt-tech *::after { box-sizing: border-box; }\r\n\r\n\/* I temi mettono margini su tutto: qui li azzeriamo in modo mirato. *\/\r\n.rt-tech p,\r\n.rt-tech h2,\r\n.rt-tech h3 { margin: 0; padding: 0; }\r\n\r\n\/* Nota: font e peso dei titoli NON sono forzati qui. Se lo fossero,\r\n   .rt-tech h3 (0,1,1) batterebbe una classe del tuo design system come\r\n   .uk-h2 (0,1,0) e quella non avrebbe alcun effetto. La tipografia sta\r\n   tutta in .rt-h2, che il PHP applica solo quando non passi title_class. *\/\r\n\r\n.rt-tech a { color: inherit; text-decoration: none; }\r\n.rt-tech a:hover { text-decoration: none; }\r\n\r\n\/* Tipografia dei titoli degli step, usata SOLO quando non passi title_class.\r\n   Scala fluida: 34px a 1440px di viewport. *\/\r\n.rt-tech .rt-h2 {\r\n  font-family: inherit;\r\n  font-size: calc(21.14px + 0.892857vw);\r\n  line-height: 1.1;\r\n  letter-spacing: -0.02em;\r\n  font-weight: 400;\r\n  color: inherit;\r\n}\r\n\r\n\/* ---- linee sottili ------------------------------------------------------ *\/\r\n.rt-tech .rt-tl,\r\n.rt-tech .rt-bl {\r\n  position: absolute;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 1px;\r\n  background-color: currentColor;\r\n  opacity: 0.2;\r\n  pointer-events: none;\r\n}\r\n.rt-tech .rt-tl { top: 0; }\r\n.rt-tech .rt-bl { bottom: 0; }\r\n\/* sfora il padding del container su entrambi i lati *\/\r\n.rt-tech .rt-bl--bleed {\r\n  left: calc(var(--rt-gutter) * -1);\r\n  right: calc(var(--rt-gutter) * -1);\r\n  width: auto;\r\n}\r\n.rt-tech .rt-tech__head > .rt-tl {\r\n  left: calc(var(--rt-gutter) * -1);\r\n  right: calc(var(--rt-gutter) * -1);\r\n  width: auto;\r\n}\r\n\/* ---- etichetta con pallino ---------------------------------------------- *\/\r\n.rt-tech .rt-dot-label {\r\n  display: flex;\r\n  align-items: baseline;\r\n  text-transform: uppercase;\r\n}\r\n.rt-tech .rt-dot-label::before {\r\n  content: \"\";\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  width: 11px;\r\n  height: 11px;\r\n  border-radius: 100%;\r\n  background-color: currentColor;\r\n  margin-right: 5px;\r\n}\r\n\r\n\/* Bottone pillola verde della sezione.\r\n\r\n   I COLORI dell'hover NON stanno pi\u00f9 qui: fondo petrol e testo bg li mette\r\n   il componente CTA, uguale a tutti gli altri bottoni del sito. Qui resta\r\n   solo ci\u00f2 che \u00e8 specifico della sezione, cio\u00e8 il comportamento\r\n   dimensionale: il bottone non deve cambiare larghezza all'hover.\r\n\r\n   Il prefisso .rt-tech NON \u00e8 decorativo: senza, queste regole colpiscono\r\n   qualsiasi .rcta--green.rcta--pill della pagina, anche fuori dalla\r\n   sezione, e sovrascrivono il comportamento standard del componente CTA. *\/\r\n.rt-tech .rcta--green.rcta--pill:hover .rcta__text,\r\n.rt-tech .rcta--green.rcta--pill:focus-visible .rcta__text {\r\n  \/* riporta la spaziatura al valore di riposo: spegne il \"respiro\" del\r\n     testo, cos\u00ec il bottone NON si allarga all'hover *\/\r\n  letter-spacing: 0.1em;\r\n}\r\n\r\n\/* Puntini 5px a riposo; all'hover non crescono ma si spostano verso\r\n   l'esterno di 3px (sinistro a sinistra, destro a destra). Larghezza del\r\n   bottone verificata identica a riposo e in hover. *\/\r\n.rt-tech .rcta--green.rcta--pill .rcta__text::before,\r\n.rt-tech .rcta--green.rcta--pill .rcta__text::after {\r\n  width: 5px;\r\n  height: 5px;\r\n  transition: transform 0.45s var(--rcta-ease);\r\n}\r\n.rt-tech .rcta--green.rcta--pill:hover .rcta__text::before,\r\n.rt-tech .rcta--green.rcta--pill:focus-visible .rcta__text::before {\r\n  width: 5px;\r\n  height: 5px;\r\n  margin-right: var(--rcta-dot-gap);\r\n  transform: translateX(-3px);\r\n}\r\n.rt-tech .rcta--green.rcta--pill:hover .rcta__text::after,\r\n.rt-tech .rcta--green.rcta--pill:focus-visible .rcta__text::after {\r\n  width: 5px;\r\n  height: 5px;\r\n  margin-left: var(--rcta-dot-gap);\r\n  transform: translateX(3px);\r\n}\r\n\r\n\/* CTA della sezione nascosto solo nella fascia \"portatile\" (Air 13\": 1470px,\r\n   Air 15\": 1512px). Sotto i 1440 (tablet, mobile) e dai 1600 in su (monitor\r\n   grandi) resta visibile. Il CSS vede la larghezza della FINESTRA, non il\r\n   modello: anche una finestra ridimensionata a ~1500px su un monitor grande\r\n   rientra qui \u2014 \u00e8 il limite di qualsiasi media query. *\/\r\n@media (min-width: 1440px) and (max-width: 1599px) {\r\n  .rt-tech .rt-tech__steps .rcta { display: none; }\r\n}\r\n\r\n\/* =========================================================================\r\n   Struttura\r\n   ========================================================================= *\/\r\n\r\n.rt-tech__sticky { position: relative; }\r\n\r\n.rt-tech__inner {\r\n  position: relative;\r\n  padding-top: var(--rt-head-pad);\r\n  padding-bottom: 140px;\r\n}\r\n\r\n\/* Su desktop la sezione si incolla sotto l'header per tutta la durata del\r\n   binario. L'altezza del binario \u00e8 150vh per step: \u00e8 la distanza che\r\n   l'utente percorre per attraversare uno step. *\/\r\n@media (min-width: 768px) {\r\n  .rt-tech { height: calc(var(--rt-step-h) * var(--rt-steps, 3)); }\r\n  .rt-tech__sticky {\r\n    position: sticky;\r\n    top: var(--rt-header-h);\r\n    height: calc(100vh - var(--rt-header-h));\r\n  }\r\n  .rt-tech__inner { padding-bottom: 0; height: 100%; }\r\n}\r\n\r\n\/* ---- linea verticale di progresso ---------------------------------------\r\n   ::before \u00e8 la traccia, ::after il riempimento che scala con --rt-progress\r\n   ancorato in alto. *\/\r\n.rt-tech .rt-vline {\r\n  display: none;\r\n  position: absolute;\r\n  \/* Parte dalla linea orizzontale della testata, non dal bordo della\r\n     sezione: le due devono incrociarsi, non sfalsarsi di --rt-head-pad. *\/\r\n  top: var(--rt-head-pad);\r\n  left: 50%;\r\n  \/* Con due colonne uguali e gap simmetrico, il centro del gap cade esatto\r\n     sul 50%: basta rientrare di mezzo pixel per centrare la linea su di\r\n     esso. (Il -10px del sito di riferimento era tarato sulla loro griglia\r\n     e qui lasciava la linea storta di 10px.) *\/\r\n  margin-left: -0.5px;\r\n  width: 1px;\r\n  height: calc(100% - var(--rt-head-pad));\r\n  color: var(--rt-ink);\r\n}\r\n.rt-tech .rt-vline::before,\r\n.rt-tech .rt-vline::after {\r\n  content: \"\";\r\n  display: block;\r\n  position: absolute;\r\n  top: 0; right: 0; bottom: 0; left: 0;\r\n}\r\n.rt-tech .rt-vline::before { background-color: currentColor; opacity: 0.2; }\r\n.rt-tech .rt-vline::after {\r\n  background-color: currentColor;\r\n  transform: scaleY(var(--rt-progress, 0));\r\n  transform-origin: top;\r\n}\r\n@media (min-width: 768px) { .rt-tech .rt-vline { display: block; } }\r\n\r\n\/* Dopo un click su uno step lo scroll salta di colpo al punto giusto del\r\n   binario (vedi goToStep nel JS): per quel singolo aggiornamento la linea\r\n   plana invece di scattare. La classe la mette e la toglie il JS; durante\r\n   lo scroll normale la linea resta agganciata 1:1 alla rotella. *\/\r\n.rt-tech .rt-vline--glide::after {\r\n  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n\/* ---- riga di testata ---------------------------------------------------- *\/\r\n.rt-tech__head {\r\n  position: relative;\r\n  padding-top: 12px;\r\n  margin-bottom: 50px;\r\n  display: grid;\r\n  gap: 10px var(--rt-gap);\r\n}\r\n.rt-tech__head-num,\r\n.rt-tech__head-year { display: none; }\r\n@media screen and (max-width: 576px) {\r\n .rt-tech__head-copy p { font-size: 40px;  max-width: none; letter-spacing:-2.728px !important;\r\n line-height:44px !important; }\r\n}\r\n\/* Tablet: senza questa regola la fascia 577\u20131023 non entrava in nessuna\r\n   media query e il claim ereditava i 15px di base della sezione. *\/\r\n@media (min-width: 577px) and (max-width: 1023px) {\r\n  .rt-tech__head-copy p { font-size: 46px; }\r\n}\r\n.rt-tech__head-year {\r\n  color: #3E6F62;\r\n  font-weight: 600;\r\n}\r\n@media (min-width: 768px) {\r\n  .rt-tech__head { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (min-width: 1024px) {\r\n  .rt-tech__head { grid-template-columns: repeat(6, 1fr); }\r\n  .rt-tech__head-num { display: block; grid-column: span 1; }\r\n  .rt-tech__head-label { grid-column: span 2; }\r\n  .rt-tech__head-copy { grid-column: span 2; max-width: 625px; padding-right: 15px; }\r\n  .rt-tech__head-year { display: block; grid-column: span 1; justify-self: end; }\r\n  .rt-tech__head-copy p { font-size: 34px; }\r\n}\r\n@media (min-width: 1440px) { \/* monitor macbook *\/\r\n.rt-tech__head-copy { padding-left: 20px; }\r\n  .rt-tech__head {\r\n    grid-template-columns: 1fr 2fr 3fr auto;\r\n  }\r\n  .rt-tech__head-num   { grid-column: span 1; }\r\n  .rt-tech__head-label { grid-column: span 1; }\r\n  .rt-tech__head-copy  { grid-column: span 1; max-width: none; }\r\n  .rt-tech__head-year  { grid-column: span 1; justify-self: end; }\r\n}\r\n@media (min-width: 1600px) {   \/* monitor grandi *\/\r\n  .rt-tech__head-copy { max-width: 625px; }\r\n  .rt-tech__head-copy p { font-size: 52px; }\r\n}\r\n.rt-tech__head-copy p {   opacity: 1; color: #192B35; font-family:\"Aptos-Light\";  }\r\n\r\n\/* ---- corpo -------------------------------------------------------------- *\/\r\n.rt-tech__body { position: relative; }\r\n\r\n@media (min-width: 768px) {\r\n  .rt-tech__body {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    column-gap: var(--rt-gap);\r\n    align-items: center;\r\n  }\r\n}\r\n@media (min-width: 1280px) {\r\n  .rt-tech__body { align-items: start; }\r\n  .rt-tech__visual { margin-top: -100px; }\r\n}\r\n\r\n.rt-tech__visual { position: relative; }\r\n\r\n.rt-tech__canvas {\r\n  position: relative;\r\n  width: 100%;\r\n  aspect-ratio: 1;\r\n  overflow: hidden;\r\n}\r\n\/* I temi impongono spesso max-width e display su canvas\/img: annulliamo. *\/\r\n.rt-tech__canvas canvas {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\nmax-width: none;\r\n}\r\n\r\n\/* Fallback per browser senza aspect-ratio (Safari < 15). *\/\r\n@supports not (aspect-ratio: 1) {\r\n  .rt-tech__canvas { padding-top: 100%; }\r\n  .rt-tech__canvas canvas { position: absolute; top: 0; left: 0; }\r\n}\r\n\r\n\/* ---- marker sul canvas --------------------------------------------------- *\/\r\n.rt-tech .rt-markers { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }\r\n\r\n.rt-tech .rt-marker {\r\n  position: absolute;\r\n  left: var(--x);\r\n  top: var(--y);\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 4px;\r\n  border: 1px solid rgba(255, 255, 255, 0.3);\r\n  background-color: rgba(56, 59, 62, 0.05);\r\n  -webkit-backdrop-filter: blur(4px);\r\n  backdrop-filter: blur(4px);\r\n  font-size: 12px;\r\n  line-height: 1;\r\n  color: var(--rt-ink);\r\n  transition: background-color 0.5s ease, color 0.5s ease;\r\n}\r\n\/* a riposo mostra un puntino *\/\r\n.rt-tech .rt-marker::before {\r\n  content: \"\";\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 100%;\r\n  background-color: currentColor;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\/* attivo: porta il numero dello step corrente *\/\r\n.rt-tech .rt-marker::after {\r\n  content: attr(data-index);\r\n  position: absolute;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n}\r\n.rt-tech .rt-marker.is-active {\r\n  background-color: rgba(56, 59, 62, 0.8);\r\n  color: #fff;\r\n}\r\n.rt-tech .rt-marker.is-active::before { opacity: 0; }\r\n.rt-tech .rt-marker.is-active::after { opacity: 1; }\r\n\r\n\/* ---- accordion ----------------------------------------------------------- *\/\r\n.rt-tech .rt-accordion { margin-bottom: 25px; }\r\n@media (min-width: 768px) { .rt-tech .rt-accordion { margin-bottom: 30px; } }\r\n\r\n.rt-tech .rt-accordion__item { position: relative; }\r\n.rt-tech .rt-accordion__rule { position: relative; height: 1px; display: none; }\r\n@media (min-width: 768px) { .rt-tech .rt-accordion__rule { display: block; } }\r\n\r\n.rt-tech .rt-accordion__head {\r\n  padding: 15px 0 30px;\r\n  cursor: pointer;\r\n  transition: opacity 0.5s ease;\r\n}\r\n@media (min-width: 1024px) { .rt-tech .rt-accordion__head { padding-top: 10px; } }\r\n\r\n\/* Il respiro sotto ogni step si adatta all'ALTEZZA della finestra, non alla\r\n   sua larghezza: il vincolo vero \u00e8 quanto spazio resta nello sticky, e un\r\n   portatile pu\u00f2 avere schermo largo ma basso. Lo spazio che avanza dopo la\r\n   parte fissa viene diviso fra gli step, con un minimo e un massimo.\r\n   Su schermi alti si arriva ai 50px del riferimento; su quelli bassi\r\n   scende quanto serve perch\u00e9 il CTA non esca dalla sezione. *\/\r\n@media (min-width: 768px) {\r\n  .rt-tech .rt-accordion__head {\r\n    padding-bottom: clamp(\r\n      16px,\r\n      calc((100vh - var(--rt-header-h) - var(--rt-chrome)) \/ var(--rt-steps, 3)),\r\n      50px\r\n    );\r\n  }\r\n}\r\n\/* Gli step si aprono anche al click, su qualsiasi schermo: su desktop il\r\n   click porta lo scroll al punto del binario di quello step, quindi il\r\n   cursore resta pointer ovunque. All'hover uno step spento si \"accende\" a\r\n   met\u00e0: fa capire che \u00e8 cliccabile senza rubare peso a quello attivo. *\/\r\n@media (hover: hover) {\r\n  .rt-tech .rt-accordion__item:not(.is-active) .rt-accordion__head:hover .rt-accordion__title h3,\r\n  .rt-tech .rt-accordion__item:not(.is-active) .rt-accordion__head:hover .rt-title-counter,\r\n  .rt-tech .rt-accordion__item:not(.is-active) .rt-accordion__head:hover .rt-title-dot {\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\/* Da tastiera i titoli sono bottoni (role\/tabindex li mette il JS). *\/\r\n.rt-tech .rt-accordion__head:focus-visible {\r\n  outline: 2px solid var(--rt-ink-800);\r\n  outline-offset: 4px;\r\n  border-radius: 4px;\r\n}\r\n\r\n.rt-tech .rt-accordion__title {\r\n  display: flex;\r\n  position: relative;\r\n  line-height: 1.05;\r\n}\r\n\r\n.rt-tech .rt-title-counter {\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  top: 0.3em;\r\n  width: 28px;\r\n  height: 28px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-right: 8px;\r\n  border: 2px solid currentColor;\r\n  border-radius: 5px;\r\n  background-color: transparent;\r\n  color: currentColor;\r\n  font-size: calc(8.57px + 0.446429vw);\r\n  font-weight: 500;\r\n  line-height: 1;\r\n  opacity: 0.2;\r\n  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n.rt-tech .rt-accordion__title h3 { opacity: 0.2; transition: opacity 0.3s ease; }\r\n\r\n.rt-tech .rt-title-dot {\r\n  display: none;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0.2em;\r\n  width: 11px;\r\n  height: 11px;\r\n  border-radius: 100%;\r\n  background-color: #3E6F62;\r\n  opacity: 0.2;\r\n  transition: opacity 0.3s ease;\r\n}\r\n@media (min-width: 768px) { .rt-tech .rt-title-dot { display: block; } }\r\n\r\n.rt-tech .rt-accordion__desc {\r\n  margin-top: 15px;\r\n  max-width: 800px;\r\n  font-size: 18px;\r\n  font-family: \"Aptos\";\r\n  line-height: 1.2;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.rt-tech .rt-accordion__item.is-active .rt-title-counter {\r\n  opacity: 1;\r\n  background-color: var(--rt-ink-800);\r\n  border-color: var(--rt-ink-800);\r\n  color: #fff;\r\n}\r\n.rt-tech .rt-accordion__item.is-active .rt-accordion__title h3,\r\n.rt-tech .rt-accordion__item.is-active .rt-title-dot,\r\n.rt-tech .rt-accordion__item.is-active .rt-accordion__desc { opacity: 1; }\r\n\r\n\/* Modalit\u00e0 compatta: con pi\u00f9 di 3 step le descrizioni sempre ingombranti\r\n   sforano l'altezza dello sticky e il bottone finisce fuori schermo. Qui\r\n   solo lo step attivo espande la sua descrizione, anche su desktop. *\/\r\n@media (min-width: 768px) {\r\n  .rt-tech--compact .rt-accordion__desc {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    margin-top: 0;\r\n    transition: grid-template-rows 0.5s ease, opacity 0.3s ease;\r\n  }\r\n  .rt-tech--compact .rt-accordion__desc > * { overflow: hidden; }\r\n  .rt-tech--compact .rt-accordion__item.is-active .rt-accordion__desc {\r\n    grid-template-rows: 1fr;\r\n    margin-top: 12px;\r\n  }\r\n}\r\n\r\n\/* Su mobile l'accordion collassa davvero: la descrizione non occupa spazio\r\n   quando lo step \u00e8 chiuso. Su desktop lo spazio resta, come nel reference. *\/\r\n@media (max-width: 767px) {\r\n  .rt-tech .rt-accordion__desc {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    margin-top: 0;\r\n    transition: grid-template-rows 0.5s ease, opacity 0.3s ease;\r\n  }\r\n  .rt-tech .rt-accordion__desc > * { overflow: hidden; }\r\n  .rt-tech .rt-accordion__item.is-active .rt-accordion__desc {\r\n    grid-template-rows: 1fr;\r\n    margin-top: 15px;\r\n  }\r\n}\r\n\r\n\/* =========================================================================\r\n   Split text\r\n   ========================================================================= *\/\r\n.rt-tech .rt-split { display: block; position: relative; }\r\n.rt-tech .rt-split__line { display: block; overflow: hidden; }\r\n.rt-tech .rt-split__line > span {\r\n  display: block;\r\n  transform: translateY(110%);\r\n  will-change: transform;\r\n  \/* \"expo out\": parte veloce e si posa, senza rimbalzo *\/\r\n  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);\r\n  transition-delay: calc(var(--i, 0) * 80ms);\r\n}\r\n.rt-tech .rt-split.is-revealed .rt-split__line > span { transform: none; }\r\n\r\n\/* =========================================================================\r\n   Bottone con etichetta a caratteri\r\n   (Inutilizzato da quando il bottone della sezione usa il componente CTA\r\n   in stile pillola. Lasciato per poter tornare indietro senza ricostruire.)\r\n   ========================================================================= *\/\r\n.rt-tech .rt-btn {\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  position: relative;\r\n  display: inline-flex;\r\n  overflow: hidden;\r\n  height: 48px;\r\n  width: 100%;\r\n  max-width: 240px;\r\n  font-size: 15px;\r\n  line-height: 1;\r\n  font-weight: 400;\r\n  font-family: inherit;\r\n  text-align: left;\r\n  border: 0;\r\n  cursor: pointer;\r\n  -webkit-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.rt-tech .rt-btn__text,\r\n.rt-tech .rt-btn__icon {\r\n  transition:\r\n    border-radius 0.9s var(--rt-ease),\r\n    color 0.9s var(--rt-ease),\r\n    transform 0.9s var(--rt-ease);\r\n  background-color: var(--rt-ink);\r\n  color: var(--rt-paper-soft);\r\n}\r\n\r\n.rt-tech .rt-btn__text {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  flex: 1;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  margin-right: 1px;\r\n}\r\n\r\n\/* separatore verticale che si estende all'hover *\/\r\n.rt-tech .rt-btn__text::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 100%;\r\n  width: 1px;\r\n  height: 100%;\r\n  background-color: var(--rt-ink);\r\n  transform: scaleY(0.5);\r\n  z-index: 2;\r\n  transition: transform 0.9s var(--rt-ease);\r\n}\r\n\r\n.rt-tech .rt-btn__icon {\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  width: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 8px;\r\n  border-radius: 4px;\r\n}\r\n.rt-tech .rt-btn__icon svg {\r\n  width: 14px;\r\n  height: 14px;\r\n  display: block;\r\n  max-width: none;\r\n}\r\n\r\n\/* due righe di caratteri impilate, alte 1.4em, con overflow tagliato *\/\r\n.rt-tech .rt-btn__chars {\r\n  display: grid;\r\n  overflow: hidden;\r\n  height: 1.4em;\r\n  gap: 0.1em;\r\n}\r\n.rt-tech .rt-char {\r\n  display: inline-block;\r\n  vertical-align: -0.25em;\r\n  transition: transform 0.55s var(--rt-ease);\r\n  transition-delay: var(--d, 0ms);\r\n  will-change: transform;\r\n}\r\n\r\n.rt-tech .rt-btn:hover .rt-char,\r\n.rt-tech .rt-btn:focus-visible .rt-char { transform: translateY(-100%) translateY(-0.3em); }\r\n\r\n.rt-tech .rt-btn:hover .rt-btn__text::before,\r\n.rt-tech .rt-btn:focus-visible .rt-btn__text::before { transform: scaleY(1); }\r\n.rt-tech .rt-btn:hover .rt-btn__text,\r\n.rt-tech .rt-btn:focus-visible .rt-btn__text {\r\n  border-top-right-radius: 0;\r\n  border-bottom-right-radius: 0;\r\n}\r\n.rt-tech .rt-btn:hover .rt-btn__icon,\r\n.rt-tech .rt-btn:focus-visible .rt-btn__icon {\r\n  border-top-left-radius: 0;\r\n  border-bottom-left-radius: 0;\r\n}\r\n.rt-tech .rt-btn:hover .rt-btn__icon svg,\r\n.rt-tech .rt-btn:focus-visible .rt-btn__icon svg {\r\n  animation: rt-arrow-bounce 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1;\r\n}\r\n\r\n@keyframes rt-arrow-bounce {\r\n  0%   { transform: translateX(0); }\r\n  20%  { transform: translateX(-10%); }\r\n  40%  { transform: translateX(15%); }\r\n  60%  { transform: translateX(-5%); }\r\n  80%  { transform: translateX(10%); }\r\n  100% { transform: translateX(0); }\r\n}\r\n\r\n\/* =========================================================================\r\n   Reduced motion \u2014 non un degrado, la seconda versione canonica.\r\n   Restano tutti gli stati e i contenuti, sparisce il movimento gratuito.\r\n   ========================================================================= *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n  .rt-tech .rt-split__line > span { transform: none; transition: none; }\r\n  .rt-tech .rt-vline--glide::after { transition: none; }\r\n  .rt-tech .rt-btn:hover .rt-char,\r\n  .rt-tech .rt-btn:focus-visible .rt-char { transform: none; }\r\n  .rt-tech .rt-btn:hover .rt-btn__icon svg,\r\n  .rt-tech .rt-btn:focus-visible .rt-btn__icon svg { animation: none; }\r\n  .rt-tech .rt-btn__text,\r\n  .rt-tech .rt-btn__icon,\r\n  .rt-tech .rt-char { transition-duration: 0.15s; }\r\n}\r\n\/* ===== Immagine ridotta a 600px e centrata nella sua colonna =====\r\n   L'altezza la fa aspect-ratio: niente max-height. I marker seguono\r\n   lo stesso riquadro dell'immagine. A 1280+ si annullano lo start e\r\n   il -100px pensati per l'immagine grande del reference. *\/\r\n.rt-tech__canvas { max-width: 500px; margin: 0 auto; }\r\n.rt-tech .rt-markers { max-width: 500px; margin: 0 auto; }\r\n@media (min-width: 1280px) {\r\n  .rt-tech__body { align-items: center; }\r\n  .rt-tech__visual { margin-top: 0; }\r\n}<\/style><script id=\"reytera-technology-js\">\/* =========================================================================\r\n   Reytera \u2014 sezione Technology scroll-driven\r\n   Versione senza dipendenze: niente three.js, niente GSAP, niente Lenis,\r\n   niente import. \u00c8 un unico file che pu\u00f2 essere incollato in uno snippet o\r\n   caricato come asset. Nessuna richiesta a CDN esterni.\r\n\r\n   Cosa sostituisce cosa:\r\n   - three.js  -> WebGL1 grezzo (un quad, uno shader): ~130 righe invece di 150KB\r\n   - ScrollTrigger -> calcolo del progresso da getBoundingClientRect\r\n   - gsap.to   -> un tween con easing cubic-inOut su rAF\r\n   - Lenis     -> niente. Lo scroll nativo va benissimo e su WordPress lo\r\n                  smooth scroll litiga con temi e page builder.\r\n\r\n   Uso: un elemento con [data-reytera-tech] e la struttura generata dal PHP.\r\n   ========================================================================= *\/\r\n(function () {\r\n  'use strict';\r\n\r\n  var ROOT_SELECTOR = '[data-reytera-tech]';\r\n  var TRANSITION_MS = 700;      \/\/ durata della dissolvenza, misurata sul reference\r\n  var EFFECT_FACTOR = 0.8;      \/\/ ampiezza della distorsione\r\n  var CHAR_DELAY_MS = 20;       \/\/ sfasamento fra i caratteri del bottone\r\n  var LINE_DELAY_MS = 80;       \/\/ sfasamento fra le righe di testo\r\n\r\n  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n  \/* =======================================================================\r\n     1. Utilit\u00e0\r\n     ======================================================================= *\/\r\n\r\n  function clamp(value, min, max) {\r\n    return value < min ? min : value > max ? max : value;\r\n  }\r\n\r\n  \/\/ Equivalente di power2.inOut di GSAP (che \u00e8 una cubica, non una quadratica).\r\n  function easeInOutCubic(t) {\r\n    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\r\n  }\r\n\r\n  function debounce(fn, wait) {\r\n    var timeoutId;\r\n    return function () {\r\n      var args = arguments;\r\n      clearTimeout(timeoutId);\r\n      timeoutId = setTimeout(function () { fn.apply(null, args); }, wait);\r\n    };\r\n  }\r\n\r\n  \/* =======================================================================\r\n     2. Loop centrale\r\n     Un solo requestAnimationFrame per tutta la pagina: chi ha bisogno di\r\n     aggiornarsi si iscrive qui. Il loop si ferma da solo quando non c'\u00e8\r\n     pi\u00f9 niente da fare, cos\u00ec a riposo il costo \u00e8 zero.\r\n     ======================================================================= *\/\r\n\r\n  var tickers = [];\r\n  var looping = false;\r\n\r\n  function frame(now) {\r\n    looping = false;\r\n    for (var i = 0; i < tickers.length; i++) tickers[i](now);\r\n    if (tickers.length) startLoop();\r\n  }\r\n\r\n  function startLoop() {\r\n    if (looping) return;\r\n    looping = true;\r\n    requestAnimationFrame(frame);\r\n  }\r\n\r\n  function addTicker(fn) {\r\n    tickers.push(fn);\r\n    startLoop();\r\n  }\r\n\r\n  function removeTicker(fn) {\r\n    var index = tickers.indexOf(fn);\r\n    if (index > -1) tickers.splice(index, 1);\r\n  }\r\n\r\n  \/* =======================================================================\r\n     3. Renderer WebGL\r\n     Un quad a schermo intero e uno shader che dissolve fra due texture\r\n     deformandole lungo Y in base a una displacement map. \u00c8 esattamente la\r\n     tecnica del riferimento, senza il peso di una libreria 3D.\r\n     ======================================================================= *\/\r\n\r\n  var VERTEX_SHADER = [\r\n    'attribute vec2 aPosition;',\r\n    'varying vec2 vUv;',\r\n    'void main() {',\r\n    \/\/ aPosition \u00e8 in clip space (-1..1); le UV sono la stessa cosa rimappata a 0..1\r\n    '  vUv = aPosition * 0.5 + 0.5;',\r\n    '  gl_Position = vec4(aPosition, 0.0, 1.0);',\r\n    '}',\r\n  ].join('\\n');\r\n\r\n  var FRAGMENT_SHADER = [\r\n    'precision highp float;',\r\n    'varying vec2 vUv;',\r\n    'uniform sampler2D tex;',        \/\/ stage in uscita\r\n    'uniform sampler2D tex2;',       \/\/ stage in entrata\r\n    'uniform sampler2D disp;',       \/\/ displacement map (conta solo il rosso)\r\n    'uniform float dispFactor;',     \/\/ 0 = solo tex, 1 = solo tex2\r\n    'uniform float effectFactor;',   \/\/ ampiezza della distorsione\r\n    'uniform float direction;',      \/\/ +1 scroll in gi\u00f9, -1 scroll in su\r\n    '',\r\n    \/\/ three.js faceva la conversione sRGB in automatico. Qui la facciamo a\r\n    \/\/ mano: si mescola in spazio lineare, altrimenti il punto medio della\r\n    \/\/ dissolvenza risulta pi\u00f9 scuro del dovuto.\r\n    'vec3 toLinear(vec3 c) { return pow(c, vec3(2.2)); }',\r\n    'vec3 toSRGB(vec3 c) { return pow(c, vec3(1.0 \/ 2.2)); }',\r\n    '',\r\n    'void main() {',\r\n    '  vec2 uv = vUv;',\r\n    '  float d = texture2D(disp, uv).r;',\r\n    \/\/ 0.1 tiene lo spostamento entro un decimo dell'altezza: oltre, la\r\n    \/\/ distorsione diventa una smagliatura invece che un fluire.\r\n    '  float distortion = d * effectFactor * direction * 0.1;',\r\n    '  vec4 a = texture2D(tex,  vec2(uv.x, uv.y + dispFactor * distortion));',\r\n    '  vec4 b = texture2D(tex2, vec2(uv.x, uv.y - (1.0 - dispFactor) * distortion));',\r\n    '  vec3 rgb = toSRGB(mix(toLinear(a.rgb), toLinear(b.rgb), dispFactor));',\r\n    '  gl_FragColor = vec4(rgb, mix(a.a, b.a, dispFactor));',\r\n    '}',\r\n  ].join('\\n');\r\n\r\n  function compileShader(gl, type, source) {\r\n    var shader = gl.createShader(type);\r\n    gl.shaderSource(shader, source);\r\n    gl.compileShader(shader);\r\n    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\r\n      var log = gl.getShaderInfoLog(shader);\r\n      gl.deleteShader(shader);\r\n      throw new Error('Shader non compilato: ' + log);\r\n    }\r\n    return shader;\r\n  }\r\n\r\n  function StageCanvas(container, sources, displacementSource) {\r\n    this.container = container;\r\n    this.sources = sources;\r\n    this.displacementSource = displacementSource;\r\n    this.currentIndex = 0;\r\n    this.needsRender = true;\r\n    this.disposed = false;\r\n    this.tween = null;\r\n    this.textures = [];\r\n  }\r\n\r\n  StageCanvas.prototype.init = function () {\r\n    var canvas = document.createElement('canvas');\r\n    canvas.setAttribute('aria-hidden', 'true');\r\n    this.canvas = canvas;\r\n    this.container.appendChild(canvas);\r\n\r\n    var options = {\r\n      alpha: true,\r\n      antialias: false,\r\n      premultipliedAlpha: false,\r\n      \/\/ Il canvas va letto solo per essere mostrato: niente preserve.\r\n      preserveDrawingBuffer: false,\r\n    };\r\n    var gl = canvas.getContext('webgl', options) ||\r\n             canvas.getContext('experimental-webgl', options);\r\n    if (!gl) throw new Error('WebGL non disponibile');\r\n    this.gl = gl;\r\n\r\n    var program = gl.createProgram();\r\n    var vs = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\r\n    var fs = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);\r\n    gl.attachShader(program, vs);\r\n    gl.attachShader(program, fs);\r\n    gl.linkProgram(program);\r\n    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\r\n      throw new Error('Program non linkato: ' + gl.getProgramInfoLog(program));\r\n    }\r\n    gl.deleteShader(vs);\r\n    gl.deleteShader(fs);\r\n    gl.useProgram(program);\r\n    this.program = program;\r\n    this.shaders = null;\r\n\r\n    \/\/ Due triangoli che coprono tutto lo schermo in clip space.\r\n    this.buffer = gl.createBuffer();\r\n    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);\r\n    gl.bufferData(\r\n      gl.ARRAY_BUFFER,\r\n      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\r\n      gl.STATIC_DRAW,\r\n    );\r\n    var aPosition = gl.getAttribLocation(program, 'aPosition');\r\n    gl.enableVertexAttribArray(aPosition);\r\n    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);\r\n\r\n    this.uniforms = {\r\n      tex: gl.getUniformLocation(program, 'tex'),\r\n      tex2: gl.getUniformLocation(program, 'tex2'),\r\n      disp: gl.getUniformLocation(program, 'disp'),\r\n      dispFactor: gl.getUniformLocation(program, 'dispFactor'),\r\n      effectFactor: gl.getUniformLocation(program, 'effectFactor'),\r\n      direction: gl.getUniformLocation(program, 'direction'),\r\n    };\r\n    gl.uniform1i(this.uniforms.tex, 0);\r\n    gl.uniform1i(this.uniforms.tex2, 1);\r\n    gl.uniform1i(this.uniforms.disp, 2);\r\n    gl.uniform1f(this.uniforms.effectFactor, reducedMotion ? 0 : EFFECT_FACTOR);\r\n    gl.uniform1f(this.uniforms.direction, 1);\r\n    gl.uniform1f(this.uniforms.dispFactor, 0);\r\n\r\n    gl.enable(gl.BLEND);\r\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\r\n\r\n    var self = this;\r\n    this.sources.forEach(function (source, index) {\r\n      self.textures[index] = self._loadTexture(source);\r\n    });\r\n    this.displacement = this._loadTexture(this.displacementSource);\r\n\r\n    this._bindTexture(0, this.textures[0]);\r\n    this._bindTexture(1, this.textures[0]);\r\n    this._bindTexture(2, this.displacement);\r\n\r\n    \/\/ Se il browser perde il contesto (cambio GPU, tab in background per\r\n    \/\/ troppo tempo) evitiamo di continuare a disegnare nel vuoto.\r\n    this._onContextLost = function (event) { event.preventDefault(); self.disposed = true; };\r\n    canvas.addEventListener('webglcontextlost', this._onContextLost);\r\n\r\n    this._resize = this._resize.bind(this);\r\n    if (window.ResizeObserver) {\r\n      this.resizeObserver = new ResizeObserver(this._resize);\r\n      this.resizeObserver.observe(this.container);\r\n    } else {\r\n      window.addEventListener('resize', this._resize);\r\n    }\r\n    this._resize();\r\n  };\r\n\r\n  StageCanvas.prototype._loadTexture = function (source) {\r\n    var gl = this.gl;\r\n    var self = this;\r\n    var texture = gl.createTexture();\r\n    gl.bindTexture(gl.TEXTURE_2D, texture);\r\n\r\n    \/\/ Pixel provvisorio: la texture \u00e8 utilizzabile subito, anche prima che\r\n    \/\/ l'immagine arrivi, cos\u00ec il primo render non fallisce.\r\n    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,\r\n      new Uint8Array([0, 0, 0, 0]));\r\n\r\n    \/\/ Le immagini possono avere lati non potenza di due: niente mipmap e\r\n    \/\/ wrap CLAMP_TO_EDGE, altrimenti in WebGL1 la texture resta nera.\r\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\r\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\r\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\r\n    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\r\n\r\n    var upload = function (image) {\r\n      if (self.disposed) return;\r\n      gl.bindTexture(gl.TEXTURE_2D, texture);\r\n      \/\/ Le immagini HTML hanno origine in alto a sinistra, le texture in\r\n      \/\/ basso a sinistra: senza questo flip l'immagine esce capovolta.\r\n      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);\r\n      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);\r\n      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);\r\n      self.needsRender = true;\r\n      startLoop();\r\n    };\r\n\r\n    if (typeof source === 'string') {\r\n      var image = new Image();\r\n      \/\/ Serve per usare immagini da un CDN\/sottodominio senza \"tainted canvas\".\r\n      image.crossOrigin = 'anonymous';\r\n      image.onload = function () { upload(image); };\r\n      image.onerror = function () {\r\n        if (window.console) console.warn('[reytera] immagine non caricata:', source);\r\n      };\r\n      image.src = source;\r\n    } else {\r\n      upload(source);\r\n    }\r\n    return texture;\r\n  };\r\n\r\n  StageCanvas.prototype._bindTexture = function (unit, texture) {\r\n    var gl = this.gl;\r\n    gl.activeTexture(gl.TEXTURE0 + unit);\r\n    gl.bindTexture(gl.TEXTURE_2D, texture);\r\n  };\r\n\r\n  StageCanvas.prototype._resize = function () {\r\n    if (this.disposed) return;\r\n    var width = this.container.clientWidth;\r\n    var height = this.container.clientHeight;\r\n    if (!width || !height) return;\r\n    \/\/ Oltre 2x il fragment shader costa il doppio senza differenze visibili.\r\n    var dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n    this.canvas.width = Math.round(width * dpr);\r\n    this.canvas.height = Math.round(height * dpr);\r\n    this.canvas.style.width = '100%';\r\n    this.canvas.style.height = '100%';\r\n    this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);\r\n    this.needsRender = true;\r\n    startLoop();\r\n  };\r\n\r\n  \/** Salta a uno step senza transizione (allineamento iniziale). *\/\r\n  StageCanvas.prototype.setIndex = function (index) {\r\n    if (this.disposed || !this.textures[index]) return;\r\n    this.tween = null;\r\n    this.currentIndex = index;\r\n    this._bindTexture(0, this.textures[index]);\r\n    this._bindTexture(1, this.textures[index]);\r\n    this.gl.uniform1f(this.uniforms.dispFactor, 0);\r\n    this.needsRender = true;\r\n    startLoop();\r\n  };\r\n\r\n  \/** Avvia la dissolvenza verso lo step richiesto. *\/\r\n  StageCanvas.prototype.goTo = function (index, direction) {\r\n    if (this.disposed || index === this.currentIndex || !this.textures[index]) return;\r\n\r\n    \/\/ Se una transizione \u00e8 in corso la chiudiamo di colpo: la nuova parte\r\n    \/\/ da uno stato pulito invece di accodarsi.\r\n    if (this.tween) this._commit(this.tween.to);\r\n\r\n    this._bindTexture(0, this.textures[this.currentIndex]);\r\n    this._bindTexture(1, this.textures[index]);\r\n    this.gl.uniform1f(this.uniforms.direction, direction < 0 ? -1 : 1);\r\n    this.gl.uniform1f(this.uniforms.dispFactor, 0);\r\n\r\n    this.tween = {\r\n      to: index,\r\n      start: (window.performance || Date).now(),\r\n      duration: reducedMotion ? 250 : TRANSITION_MS,\r\n    };\r\n    this.needsRender = true;\r\n    startLoop();\r\n  };\r\n\r\n  StageCanvas.prototype._commit = function (index) {\r\n    this.tween = null;\r\n    this.currentIndex = index;\r\n    this._bindTexture(0, this.textures[index]);\r\n    this.gl.uniform1f(this.uniforms.dispFactor, 0);\r\n    this.needsRender = true;\r\n  };\r\n\r\n  \/** Chiamato dal loop centrale. Disegna solo se c'\u00e8 qualcosa di nuovo. *\/\r\n  StageCanvas.prototype.update = function (now) {\r\n    if (this.disposed) return;\r\n\r\n    if (this.tween) {\r\n      var elapsed = now - this.tween.start;\r\n      var t = clamp(elapsed \/ this.tween.duration, 0, 1);\r\n      this.gl.uniform1f(this.uniforms.dispFactor, easeInOutCubic(t));\r\n      this.needsRender = true;\r\n      if (t >= 1) this._commit(this.tween.to);\r\n    }\r\n\r\n    if (!this.needsRender) return;\r\n    this.gl.clearColor(0, 0, 0, 0);\r\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT);\r\n    this.gl.drawArrays(this.gl.TRIANGLES, 0, 6);\r\n    this.needsRender = false;\r\n  };\r\n\r\n  StageCanvas.prototype.dispose = function () {\r\n    this.disposed = true;\r\n    var gl = this.gl;\r\n    if (!gl) return;\r\n    if (this.resizeObserver) this.resizeObserver.disconnect();\r\n    else window.removeEventListener('resize', this._resize);\r\n    this.canvas.removeEventListener('webglcontextlost', this._onContextLost);\r\n    this.textures.forEach(function (texture) { gl.deleteTexture(texture); });\r\n    gl.deleteTexture(this.displacement);\r\n    gl.deleteBuffer(this.buffer);\r\n    gl.deleteProgram(this.program);\r\n    var lose = gl.getExtension('WEBGL_lose_context');\r\n    if (lose) lose.loseContext();\r\n    if (this.canvas.parentNode) this.canvas.parentNode.removeChild(this.canvas);\r\n  };\r\n\r\n  \/* =======================================================================\r\n     4. Displacement map generata a runtime\r\n     Macchie radiali morbide su base grigia. Serve un pattern a bassa\r\n     frequenza: il dettaglio fine produrrebbe rumore invece di flusso.\r\n     Generarla evita un'immagine in pi\u00f9 da caricare.\r\n     ======================================================================= *\/\r\n\r\n  function createDisplacementMap() {\r\n    var size = 512;\r\n    var canvas = document.createElement('canvas');\r\n    canvas.width = canvas.height = size;\r\n    var ctx = canvas.getContext('2d');\r\n\r\n    ctx.fillStyle = '#3a3a3a';\r\n    ctx.fillRect(0, 0, size, size);\r\n    ctx.globalCompositeOperation = 'lighter';\r\n    for (var i = 0; i < 26; i++) {\r\n      var x = Math.random() * size;\r\n      var y = Math.random() * size;\r\n      var radius = size * (0.12 + Math.random() * 0.26);\r\n      var blob = ctx.createRadialGradient(x, y, 0, x, y, radius);\r\n      blob.addColorStop(0, 'rgba(255,255,255,0.55)');\r\n      blob.addColorStop(1, 'rgba(255,255,255,0)');\r\n      ctx.fillStyle = blob;\r\n      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);\r\n    }\r\n    return canvas;\r\n  }\r\n\r\n  \/* =======================================================================\r\n     5. Split text\r\n     Il paragrafo viene misurato, si deduce dove il browser \u00e8 andato a capo\r\n     e si ricostruisce una riga per capoverso visivo. Lo stato del reveal \u00e8\r\n     una classe CSS: cos\u00ec un ricalcolo dopo un resize non pu\u00f2 lasciare il\r\n     testo bloccato fuori schermo.\r\n     ======================================================================= *\/\r\n\r\n  function SplitText(element) {\r\n    this.element = element;\r\n    this.originalText = (element.textContent || '').trim().replace(\/\\s+\/g, ' ');\r\n    this.lastWidth = 0;\r\n    this.revealed = false;\r\n    this.wrapper = null;\r\n  }\r\n\r\n  SplitText.prototype.init = function () {\r\n    this.split();\r\n    var self = this;\r\n    this._onResize = debounce(function () {\r\n      \/\/ Solo se cambia la larghezza: su mobile la barra indirizzi genera\r\n      \/\/ resize verticali continui che non c'entrano nulla.\r\n      if (self.element.clientWidth === self.lastWidth) return;\r\n      self.split();\r\n    }, 200);\r\n    window.addEventListener('resize', this._onResize);\r\n  };\r\n\r\n  SplitText.prototype.split = function () {\r\n    this.lastWidth = this.element.clientWidth;\r\n    var words = this.originalText.split(' ');\r\n    var element = this.element;\r\n    element.textContent = '';\r\n\r\n    \/\/ Fase 1: ogni parola diventa un inline-block misurabile.\r\n    var probes = words.map(function (word, index) {\r\n      var span = document.createElement('span');\r\n      span.style.display = 'inline-block';\r\n      span.textContent = word;\r\n      element.appendChild(span);\r\n      if (index < words.length - 1) element.appendChild(document.createTextNode(' '));\r\n      return span;\r\n    });\r\n\r\n    \/\/ Fase 2: parole con lo stesso offsetTop stanno sulla stessa riga.\r\n    var grouped = [];\r\n    var currentTop = null;\r\n    probes.forEach(function (span, index) {\r\n      if (span.offsetTop !== currentTop) {\r\n        grouped.push([]);\r\n        currentTop = span.offsetTop;\r\n      }\r\n      grouped[grouped.length - 1].push(words[index]);\r\n    });\r\n\r\n    \/\/ Fase 3: ricostruzione definitiva.\r\n    var wrapper = document.createElement('span');\r\n    wrapper.className = 'rt-split';\r\n    wrapper.setAttribute('aria-hidden', 'true');\r\n    grouped.forEach(function (wordsInLine, index) {\r\n      var line = document.createElement('span');\r\n      line.className = 'rt-split__line';\r\n      line.style.setProperty('--i', String(index));\r\n      var inner = document.createElement('span');\r\n      inner.textContent = wordsInLine.join(' ') + '\u00a0';\r\n      line.appendChild(inner);\r\n      wrapper.appendChild(line);\r\n    });\r\n\r\n    element.textContent = '';\r\n    element.appendChild(wrapper);\r\n    \/\/ La frase intera resta il nome accessibile; le righe sono decorative.\r\n    element.setAttribute('aria-label', this.originalText);\r\n    this.wrapper = wrapper;\r\n    if (this.revealed) wrapper.classList.add('is-revealed');\r\n  };\r\n\r\n  SplitText.prototype.reveal = function () {\r\n    this.revealed = true;\r\n    if (this.wrapper) this.wrapper.classList.add('is-revealed');\r\n  };\r\n\r\n  SplitText.prototype.dispose = function () {\r\n    window.removeEventListener('resize', this._onResize);\r\n    this.element.removeAttribute('aria-label');\r\n    this.element.textContent = this.originalText;\r\n    this.wrapper = null;\r\n  };\r\n\r\n  \/* =======================================================================\r\n     6. Bottone con etichetta a caratteri\r\n     Due copie del testo impilate in una griglia con overflow nascosto:\r\n     all'hover salgono entrambe di una riga, con ritardo crescente per\r\n     carattere. Lo stato \u00e8 tutto in CSS.\r\n     ======================================================================= *\/\r\n\r\n  function buildCharButton(button) {\r\n    var label = button.querySelector('.rt-btn__label');\r\n    if (!label) return;\r\n    var text = (label.textContent || '').trim();\r\n    if (!text) return;\r\n\r\n    function buildRow() {\r\n      var row = document.createElement('span');\r\n      \/\/ Array.from gestisce accenti ed emoji come singoli caratteri.\r\n      Array.prototype.forEach.call(Array.from(text), function (character, index) {\r\n        var span = document.createElement('span');\r\n        span.className = 'rt-char';\r\n        span.style.setProperty('--d', (index * CHAR_DELAY_MS) + 'ms');\r\n        span.textContent = character === ' ' ? '\u00a0' : character;\r\n        row.appendChild(span);\r\n      });\r\n      return row;\r\n    }\r\n\r\n    var chars = document.createElement('span');\r\n    chars.className = 'rt-btn__chars';\r\n    chars.setAttribute('aria-hidden', 'true');\r\n    chars.appendChild(buildRow());\r\n    chars.appendChild(buildRow());\r\n\r\n    button.setAttribute('aria-label', text);\r\n    label.parentNode.replaceChild(chars, label);\r\n  }\r\n\r\n  \/* =======================================================================\r\n     7. La sezione\r\n     ======================================================================= *\/\r\n\r\n  \/\/ Quale marker porta il badge numerato, per ogni step. Le posizioni sui\r\n  \/\/ marker restano fisse: cambia solo quale \u00e8 acceso. Con pi\u00f9 step che\r\n  \/\/ marker l'ordine si ripete ciclicamente, cos\u00ec il badge non sparisce mai.\r\n  var MARKER_ORDER = [2, 1, 0];\r\n\r\n  function TechnologySection(root) {\r\n    this.root = root;\r\n    this.steps = Array.prototype.slice.call(root.querySelectorAll('[data-rt-step]'));\r\n    this.markers = Array.prototype.slice.call(root.querySelectorAll('.rt-marker'));\r\n    this.canvasHost = root.querySelector('[data-rt-canvas]');\r\n    this.line = root.querySelector('.rt-vline');\r\n    this.stepCount = this.steps.length;\r\n    this.activeIndex = -1;\r\n    this.lastProgress = 0;\r\n    \/\/ Indice verso cui si sta riposizionando lo scroll dopo un click; -1 =\r\n    \/\/ nessun riposizionamento in corso. Col salto istantaneo arriva un solo\r\n    \/\/ evento di scroll, gi\u00e0 a destinazione; il lock resta come rete di\r\n    \/\/ sicurezza se un tema anima lo scroll per conto suo.\r\n    this.scrollLock = -1;\r\n    this.splits = [];\r\n    this.observers = [];\r\n    this.canvas = null;\r\n  }\r\n\r\n  TechnologySection.prototype.init = function () {\r\n    if (!this.stepCount) return;\r\n    this.initSplitText();\r\n    this.initButtons();\r\n    this.initSteps();\r\n    this.initScroll();\r\n    this.setStep(0, 1);\r\n    this.initCanvas();\r\n  };\r\n\r\n  TechnologySection.prototype.initSplitText = function () {\r\n    var self = this;\r\n    var elements = this.root.querySelectorAll('[data-rt-split]');\r\n    Array.prototype.forEach.call(elements, function (element) {\r\n      var split = new SplitText(element);\r\n      split.init();\r\n      self.splits.push(split);\r\n\r\n      if (reducedMotion) { split.reveal(); return; }\r\n\r\n      \/\/ IntersectionObserver e non un calcolo sullo scroll: qui la domanda\r\n      \/\/ \u00e8 solo \"\u00e8 entrato in viewport\", e vale gi\u00e0 alla creazione.\r\n      var observer = new IntersectionObserver(function (entries) {\r\n        for (var i = 0; i < entries.length; i++) {\r\n          if (!entries[i].isIntersecting) continue;\r\n          split.reveal();\r\n          observer.disconnect();\r\n          return;\r\n        }\r\n      }, { rootMargin: '0px 0px -12% 0px' });\r\n      observer.observe(element);\r\n      self.observers.push(observer);\r\n    });\r\n  };\r\n\r\n  TechnologySection.prototype.initButtons = function () {\r\n    var buttons = this.root.querySelectorAll('[data-rt-char-button]');\r\n    Array.prototype.forEach.call(buttons, buildCharButton);\r\n  };\r\n\r\n  TechnologySection.prototype.initSteps = function () {\r\n    var self = this;\r\n    this.steps.forEach(function (step, index) {\r\n      var head = step.querySelector('.rt-accordion__head');\r\n      if (!head) return;\r\n\r\n      \/\/ I titoli sono interattivi anche da tastiera: sono div, quindi\r\n      \/\/ ruolo e tabindex vanno aggiunti a mano.\r\n      head.setAttribute('role', 'button');\r\n      head.setAttribute('tabindex', '0');\r\n\r\n      head.addEventListener('click', function () {\r\n        self.goToStep(index);\r\n      });\r\n      head.addEventListener('keydown', function (event) {\r\n        if (event.key !== 'Enter' && event.key !== ' ') return;\r\n        event.preventDefault(); \/\/ lo spazio non deve scrollare la pagina\r\n        self.goToStep(index);\r\n      });\r\n    });\r\n\r\n    \/\/ Qualsiasi input di scroll dell'utente riconsegna subito il comando\r\n    \/\/ alla posizione reale (e spegne la planata della linea, se in corso).\r\n    this._unlock = function () {\r\n      self.scrollLock = -1;\r\n      if (self.line) self.line.classList.remove('rt-vline--glide');\r\n    };\r\n    window.addEventListener('wheel', this._unlock, { passive: true });\r\n    window.addEventListener('touchstart', this._unlock, { passive: true });\r\n  };\r\n\r\n  \/**\r\n   * Porta la sezione allo step richiesto, da click o da tastiera.\r\n   *\r\n   * Su desktop lo step \u00e8 FUNZIONE dello scroll: cambiare solo lo stato non\r\n   * basta, il primo evento di scroll lo riporterebbe indietro. Quindi il\r\n   * click sposta lo scroll al punto del binario che corrisponde a quello\r\n   * step, e lo stato cambia subito (una sola dissolvenza).\r\n   *\r\n   * Il riposizionamento \u00e8 ISTANTANEO, non smooth, di proposito. Dentro lo\r\n   * sticky la posizione di scroll \u00e8 invisibile: il pannello non si muove,\r\n   * quindi uno smooth scroll non mostrerebbe nulla \u2014 durerebbe solo a\r\n   * lungo. E se l'utente tocca la rotella a met\u00e0 volo, il browser CANCELLA\r\n   * lo smooth scroll lasciando la posizione su uno step intermedio: da l\u00ec\r\n   * il sintomo \"clicco il quinto, scrollo in gi\u00f9 e torno al quarto\". Col\r\n   * salto secco la posizione \u00e8 coerente subito e lo scroll successivo\r\n   * prosegue o esce dalla sezione senza detour.\r\n   *\/\r\n  TechnologySection.prototype.goToStep = function (index) {\r\n    if (index === this.activeIndex) return;\r\n    var direction = index > this.activeIndex ? 1 : -1;\r\n\r\n    \/\/ Sotto i 768px la sezione non \u00e8 sticky e lo spy non gira: l'accordion\r\n    \/\/ si apre e basta, come prima.\r\n    if (!window.matchMedia('(min-width: 768px)').matches) {\r\n      this.setStep(index, direction);\r\n      return;\r\n    }\r\n\r\n    var headerHeight = parseFloat(\r\n      getComputedStyle(this.root).getPropertyValue('--rt-header-h')\r\n    ) || 0;\r\n    var rect = this.root.getBoundingClientRect();\r\n    var travel = rect.height - (window.innerHeight - headerHeight);\r\n    if (travel <= 0) { this.setStep(index, direction); return; }\r\n\r\n    \/\/ Centro dello step: progress (i + 0.5) \/ N, riportato in pixel di\r\n    \/\/ scroll con la stessa formula (invertita) di updateProgress.\r\n    var sectionTop = rect.top + (window.pageYOffset || document.documentElement.scrollTop || 0);\r\n    var target = sectionTop - headerHeight + ((index + 0.5) \/ this.stepCount) * travel;\r\n\r\n    this.scrollLock = index;\r\n    this.setStep(index, direction);\r\n\r\n    \/\/ Il salto secco farebbe scattare anche la linea di progresso: per\r\n    \/\/ quel singolo aggiornamento le concediamo una planata via CSS. La\r\n    \/\/ classe dura poco, cos\u00ec durante lo scroll normale la linea resta\r\n    \/\/ agganciata 1:1 alla rotella.\r\n    if (this.line) {\r\n      var line = this.line;\r\n      line.classList.add('rt-vline--glide');\r\n      clearTimeout(this._glideTimer);\r\n      this._glideTimer = setTimeout(function () {\r\n        line.classList.remove('rt-vline--glide');\r\n      }, 750);\r\n    }\r\n\r\n    \/\/ scrollTo(x, y) rispetta un eventuale scroll-behavior: smooth messo\r\n    \/\/ dal tema, che riaprirebbe la finestra del bug: lo spegniamo per la\r\n    \/\/ durata del salto.\r\n    var docEl = document.documentElement;\r\n    var prevBehavior = docEl.style.scrollBehavior;\r\n    docEl.style.scrollBehavior = 'auto';\r\n    window.scrollTo(0, Math.max(0, Math.round(target)));\r\n    docEl.style.scrollBehavior = prevBehavior;\r\n\r\n    \/\/ Rete di sicurezza: se qualcosa (uno smooth scroll di terzi, un tema\r\n    \/\/ che anima lo scroll via JS) ritarda l'arrivo, lo spy non deve\r\n    \/\/ restare sordo per sempre.\r\n    var self = this;\r\n    clearTimeout(this._lockTimer);\r\n    this._lockTimer = setTimeout(function () {\r\n      self.scrollLock = -1;\r\n      self.updateProgress();\r\n    }, 1600);\r\n  };\r\n\r\n  TechnologySection.prototype.initScroll = function () {\r\n    var self = this;\r\n    var scheduled = false;\r\n\r\n    this._onScroll = function () {\r\n      if (scheduled) return;\r\n      scheduled = true;\r\n      requestAnimationFrame(function () {\r\n        scheduled = false;\r\n        self.updateProgress();\r\n      });\r\n    };\r\n\r\n    window.addEventListener('scroll', this._onScroll, { passive: true });\r\n    window.addEventListener('resize', this._onScroll);\r\n    this.updateProgress();\r\n  };\r\n\r\n  \/**\r\n   * Il progresso \u00e8 la posizione della sezione rispetto alla finestra: 0\r\n   * quando il bordo alto tocca l'header, 1 quando il bordo basso raggiunge\r\n   * il fondo schermo. Non serve una libreria per questo.\r\n   *\/\r\n  TechnologySection.prototype.updateProgress = function () {\r\n    if (!window.matchMedia('(min-width: 768px)').matches) return;\r\n\r\n    var headerHeight = parseFloat(\r\n      getComputedStyle(this.root).getPropertyValue('--rt-header-h')\r\n    ) || 0;\r\n\r\n    var rect = this.root.getBoundingClientRect();\r\n    var travel = rect.height - (window.innerHeight - headerHeight);\r\n    if (travel <= 0) return;\r\n\r\n    var progress = clamp((headerHeight - rect.top) \/ travel, 0, 1);\r\n    var direction = progress >= this.lastProgress ? 1 : -1;\r\n    this.lastProgress = progress;\r\n\r\n    if (this.line) this.line.style.setProperty('--rt-progress', progress.toFixed(4));\r\n\r\n    \/\/ progress 0\u21921 diventa 0\u2192stepCount: la parte intera \u00e8 lo step, la\r\n    \/\/ frazione \u00e8 l'avanzamento dentro quello step.\r\n    var scaled = progress * this.stepCount;\r\n    var index = clamp(Math.floor(scaled), 0, this.stepCount - 1);\r\n\r\n    this.steps.forEach(function (step, i) {\r\n      var itemProgress = i < index ? 1 : i > index ? 0 : scaled - index;\r\n      step.style.setProperty('--rt-ip', itemProgress.toFixed(4));\r\n    });\r\n\r\n    \/\/ Volo post-click in corso: linea e variabili si aggiornano (sopra),\r\n    \/\/ ma lo step non cambia finch\u00e9 non arriviamo a quello cliccato. Senza\r\n    \/\/ questo blocco ogni step intermedio sparerebbe la sua dissolvenza.\r\n    if (this.scrollLock >= 0) {\r\n      if (index !== this.scrollLock) return;\r\n      this.scrollLock = -1; \/\/ arrivati: lo spy riprende il comando\r\n      clearTimeout(this._lockTimer);\r\n    }\r\n\r\n    this.setStep(index, direction);\r\n  };\r\n\r\n  TechnologySection.prototype.setStep = function (index, direction) {\r\n    if (index === this.activeIndex) return;\r\n    this.activeIndex = index;\r\n\r\n    this.steps.forEach(function (step, i) {\r\n      step.classList.toggle('is-active', i === index);\r\n    });\r\n\r\n    \/\/ Il modulo su MARKER_ORDER copre il caso \"pi\u00f9 step che marker\"; quello\r\n    \/\/ su markers.length protegge dal caso opposto (marker rimossi dal markup).\r\n    var activeMarker = this.markers.length\r\n      ? MARKER_ORDER[index % MARKER_ORDER.length] % this.markers.length\r\n      : -1;\r\n\r\n    this.markers.forEach(function (marker, i) {\r\n      var isActive = i === activeMarker;\r\n      marker.classList.toggle('is-active', isActive);\r\n      marker.setAttribute('data-index', isActive ? String(index + 1) : '');\r\n    });\r\n\r\n    if (this.canvas) this.canvas.goTo(index, direction || 1);\r\n  };\r\n\r\n  TechnologySection.prototype.initCanvas = function () {\r\n    if (!this.canvasHost) return;\r\n\r\n    var raw = this.canvasHost.getAttribute('data-rt-images') || '';\r\n    var sources = raw.split('|').map(function (s) { return s.trim(); })\r\n                     .filter(function (s) { return s.length; });\r\n\r\n    \/\/ Senza immagini la sezione resta perfettamente usabile: testo, step e\r\n    \/\/ linea di progresso non dipendono dal canvas.\r\n    if (sources.length < 2) {\r\n      if (window.console) {\r\n        console.info('[reytera] nessuna immagine: la sezione funziona senza canvas.');\r\n      }\r\n      return;\r\n    }\r\n\r\n    var self = this;\r\n    \/\/ Il canvas serve solo quando la sezione si avvicina: crearlo subito\r\n    \/\/ significherebbe compilare shader e scaricare immagini per una parte\r\n    \/\/ di pagina che l'utente potrebbe non raggiungere mai.\r\n    var observer = new IntersectionObserver(function (entries) {\r\n      if (!entries[0].isIntersecting) return;\r\n      observer.disconnect();\r\n      self.buildCanvas(sources);\r\n    }, { rootMargin: '50% 0px' });\r\n    observer.observe(this.root);\r\n    this.observers.push(observer);\r\n  };\r\n\r\n  TechnologySection.prototype.buildCanvas = function (sources) {\r\n    try {\r\n      this.canvas = new StageCanvas(this.canvasHost, sources, createDisplacementMap());\r\n      this.canvas.init();\r\n      this.canvas.setIndex(Math.max(0, this.activeIndex));\r\n      var canvas = this.canvas;\r\n      this._ticker = function (now) { canvas.update(now); };\r\n      addTicker(this._ticker);\r\n    } catch (error) {\r\n      this.canvas = null;\r\n      if (window.console) console.warn('[reytera] canvas non inizializzato:', error);\r\n    }\r\n  };\r\n\r\n  TechnologySection.prototype.dispose = function () {\r\n    window.removeEventListener('scroll', this._onScroll);\r\n    window.removeEventListener('resize', this._onScroll);\r\n    window.removeEventListener('wheel', this._unlock);\r\n    window.removeEventListener('touchstart', this._unlock);\r\n    clearTimeout(this._lockTimer);\r\n    clearTimeout(this._glideTimer);\r\n    this.observers.forEach(function (observer) { observer.disconnect(); });\r\n    this.splits.forEach(function (split) { split.dispose(); });\r\n    if (this._ticker) removeTicker(this._ticker);\r\n    if (this.canvas) this.canvas.dispose();\r\n  };\r\n\r\n  \/* =======================================================================\r\n     8. Avvio\r\n     ======================================================================= *\/\r\n\r\n  function init() {\r\n    var roots = document.querySelectorAll(ROOT_SELECTOR);\r\n    Array.prototype.forEach.call(roots, function (root) {\r\n      if (root.hasAttribute('data-rt-ready')) return; \/\/ niente doppie inizializzazioni\r\n      root.setAttribute('data-rt-ready', '');\r\n      new TechnologySection(root).init();\r\n    });\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n\r\n  \/\/ I page builder inseriscono contenuto dopo il load: se compare una nuova\r\n  \/\/ sezione la inizializziamo comunque.\r\n  window.addEventListener('load', init);\r\n})();<\/script><section class=\"rt-tech rt-tech--compact\" data-reytera-tech style=\"--rt-steps:5;--rt-header-h:40px;--rt-step-h:150vh;\">\r\n\t<div class=\"rt-tech__sticky\">\r\n\t\t<div class=\"rt-tech__inner\">\r\n\r\n\t\t\t<span class=\"rt-vline\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-bl rt-bl--bleed\" aria-hidden=\"true\"><\/span>\r\n\r\n\t\t\t<div class=\"rt-tech__head\">\r\n\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t<div class=\"rt-tech__head-num\"><span class=\"label-dot\">TECNOLOGIA<\/span><\/div>\r\n\t\t\t\t<div class=\"rt-tech__head-label\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"rt-tech__head-copy\">\r\n\t\t\t\t\t<p data-rt-split>I blocchi che rendono possibile la piattaforma.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"rt-tech__head-year\"><p data-rt-split>[ 05. ]<\/p><\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div class=\"rt-tech__body\">\r\n\r\n\t\t\t\t<div class=\"rt-tech__visual\">\r\n\t\t\t\t\t<div class=\"rt-tech__canvas\" data-rt-canvas\r\n\t\t\t\t\t\tdata-rt-images=\"\"><\/div>\r\n\r\n\t\t\t\t\t<div class=\"rt-markers\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker\" style=\"--x:78%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker\" style=\"--x:13%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker\" style=\"--x:70%;--y:12%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div class=\"rt-tech__steps\">\r\n\t\t\t\t\t<div class=\"rt-accordion\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">1<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Ambiente controllato<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Gestiamo le condizioni che influenzano crescita e qualit\u00e0 botanica, applicando protocolli agronomici definiti sulle specifiche del progetto e riducendo la dipendenza da clima e stagionalit\u00e0.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">2<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Profilo fitochimico<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Orientiamo il profilo fitochimico della pianta verso le caratteristiche richieste dal progetto, attraverso la gestione coordinata delle principali variabili agronomiche.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">3<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Estrazione e metodi<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Selezioniamo tecniche, veicoli e parametri di processo in funzione della botanica, del profilo desiderato e del formato da ottenere.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">4<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Standardizzazione e compliance<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Analisi, tracciabilit\u00e0 e documentazione tecnica supportano la verifica di coerenza, sicurezza e ripetibilit\u00e0 dell\u2019output rispetto alle specifiche condivise.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">5<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Know-how, protocolli e propriet\u00e0 intellettuale<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Protocolli riservati e know-how proprietario sostengono lo sviluppo e l\u2019innovazione. Quando previsto dal progetto, il percorso pu\u00f2 generare propriet\u00e0 intellettuale dedicata, con modalit\u00e0 definite insieme al cliente.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__rule\"><span class=\"rt-tl\" aria-hidden=\"true\"><\/span><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a class=\"rcta rcta--primary rcta--green rcta--pill rcta--sm\" href=\"mailto:info@reytera.it\" data-rcta>\r\n\t\t\t\t\t\t<span class=\"rcta__text\"><span class=\"rcta__label\">Proponi una partnership<\/span><\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/section>\r\n\t\t<\/div>\n<div>\n<style>\n  .ry-vslider {\n    \/* ---- quote e spazi (valori del reference) ---- *\/\n    --ry-vs-top: 25vh;            \/* quota di aggancio di immagine, linea e numero *\/\n    --ry-vs-inset: 15px;          \/* rientro laterale del blocco: come il container UIkit (15px, 30px da 640, 40px da 960) *\/\n    --ry-vs-gap: 20px;            \/* gutter della griglia a 12 colonne *\/\n    --ry-vs-space: 80px;         \/* distanza fra gli step (desktop; il reference usa 180px) *\/\n    --ry-vs-space-m: 60px;        \/* distanza fra gli step (mobile e tablet) *\/\n    --ry-vs-space-last: 0px;     \/* distanza fra il penultimo step e l'ultimo (desktop) *\/\n    --ry-vs-radius: 12px;         \/* angoli delle immagini *\/\n    --ry-vs-ratio: 3 \/ 2;         \/* rapporto delle immagini (1200x800) *\/\n    --ry-vs-rail-h: calc(100% - 20px);  \/* linea verticale: alta come l'immagine, finisce 20px sopra al suo bordo inferiore *\/\n    --ry-vs-rail-shift: 0px;      \/* >0 sposta la linea a destra rispetto al centro del numero *\/\n    --ry-vs-badge: 20px;          \/* diametro del numero *\/\n    --ry-vs-badge-x: 0px;         \/* numero e linea: distanza dal bordo sinistro della griglia *\/<\/p>\n<p>    \/* ---- griglia a 12 colonne (desktop): dove stanno le cose ---- *\/\n    --ry-vs-cols-text: 2 \/ span 5;    \/* titolo, riga e testo: dalla colonna 2 alla 6 *\/\n    --ry-vs-cols-media: 8 \/ span 3;   \/* immagine: dalla colonna 7 alla 11 (span 6 per arrivare al bordo destro) *\/<\/p>\n<p>    \/* ---- tablet e mobile ---- *\/\n    --ry-vs-gutter-m: 40px;           \/* spazio a sinistra del contenuto per linea e numero *\/\n    --ry-vs-rail-m: 40vh;             \/* lunghezza della linea (non c'e' l'immagine a darle l'altezza) *\/\n    --ry-vs-figure-w: 700px;          \/* immagine di ogni step: larghezza massima ... *\/\n    --ry-vs-figure-ratio: 700 \/ 350;  \/* ... e proporzioni (500x350) *\/<\/p>\n<p>    \/* ---- testata fissa sopra lo slider (solo desktop) ---- *\/\n    --ry-vs-head-top: 60px;            \/* distanza dal bordo alto del viewport quando e' fissa (es. altezza del menu) *\/\n    --ry-vs-head-gap: 70px;           \/* spazio fra il paragrafo della testata e la quota di immagine e linea: e' anche il tratto in cui il testo che sale sfuma *\/\n    --ry-vs-head-bg: transparent;     \/* sfondo della testata fissa; se resta transparent il JS usa il colore del contenitore *\/<\/p>\n<p>    \/* ---- colori e font (allineati al sito) ---- *\/\n    --ry-vs-ink: #192b35;                       \/* linea piena, numero, riga *\/\n    --ry-vs-ink-soft: rgba(25, 43, 53, 0.2);    \/* linea di sfondo *\/\n    --ry-vs-badge-text: #fff;\n    --ry-vs-font-title: 'Aptos-Light', 'Aptos', ui-sans-serif, system-ui, sans-serif;\n    --ry-vs-font-strong: 'Aptos', ui-sans-serif, system-ui, sans-serif;\n    --ry-vs-font-text: 'Aptos', ui-sans-serif, system-ui, sans-serif;<\/p>\n<p>    position: relative;\n    padding: 0 var(--ry-vs-inset);\n    color: var(--ry-vs-ink);\n  }<\/p>\n<p>  \/* ---------- Testata: eyebrow, titolo e, a destra, divisore, etichetta e\n     paragrafo. Usa le classi del tema. Su desktop resta fissa in alto per\n     tutta la section (sticky) e lo slider le scorre sotto: la quota di\n     aggancio di immagine e linea e' il suo bordo inferiore. ---------- *\/\n  .ry-vslider__headwrap { position: relative; z-index: 3; }\n  .ry-vslider__head {\n    position: relative;\n    padding-bottom: var(--ry-vs-head-gap);\n  }\n  .ry-vslider__head-row {\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    column-gap: var(--ry-vs-gap);\n  }\n  .ry-vslider__head-right { grid-column: 7 \/ span 6; }\n  @media (max-width: 1023.98px) {\n    .ry-vslider__head-right { grid-column: 1 \/ -1; }\n  }\n  @media (min-width: 1024px) {\n    \/* Il wrapper esce dal flusso (gli step ricevono dal JS un padding-top\n       pari all'altezza della testata) e diventa il binario dello sticky:\n       alto fino all'ultimo step, misurato dal JS. *\/\n    .ry-vslider.is-ready .ry-vslider__headwrap {\n      position: absolute;\n      top: 0;\n      left: var(--ry-vs-inset);\n      right: var(--ry-vs-inset);\n      pointer-events: none;\n    }\n    .ry-vslider.is-ready .ry-vslider__head {\n      position: sticky;\n      top: var(--ry-vs-head-top);\n      background-color: var(--ry-vs-head-bg);\n      background-clip: content-box;   \/* lo sfondo si ferma al paragrafo: nello spazio sotto il testo sfuma, non viene tagliato *\/\n      pointer-events: auto;\n    }\n  }<\/p>\n<p>  \/* ---------- Step (colonna testo) ---------- *\/\n  .ry-vslider__items { position: relative; z-index: 1; }<\/p>\n<p>  .ry-vslider__item {\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    column-gap: var(--ry-vs-gap);\n    margin: 0 0 var(--ry-vs-space-m);\n    padding: 0;\n  }\n  .ry-vslider__item:last-child { margin-bottom: 0; }<\/p>\n<p>  .ry-vslider__figure {\n    grid-column: 1 \/ -1;\n    margin: 0 0 20px;\n    overflow: hidden;\n  }\n  .ry-vslider__figure img {\n    display: block;\n    width: 100%;\n    height: auto;\n    aspect-ratio: var(--ry-vs-ratio);\n    object-fit: cover;\n  }<\/p>\n<p>  .ry-vslider__body { grid-column: 1 \/ -1; position: relative; }<\/p>\n<p>  .ry-vslider__num,\n  .ry-vslider__badge span {\n   display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--ry-vs-badge);\n    height: var(--ry-vs-badge);\n    border-radius: 3px;\n        background:#DCE8E2;\n  border:1px solid #3E6F62;\n          font-weight: 600;\n    color: #3E6F62;\n    font-family: var(--ry-vs-font-text);\n    font-size: 14px;\n    line-height: 14px;\n      width: 22px;\n    height: 22px;\n    letter-spacing: 0;\n    \/*width: var(--ry-vs-badge);\n    height: var(--ry-vs-badge);\n    background: var(--ry-vs-ink);\n    color: var(--ry-vs-badge-text);\n    font-family: var(--ry-vs-font-text);\n    font-size: 12px;\n    line-height: 12px;\n    letter-spacing: 0;\n         \/* width: 28px;\n    height: 28px;\n    border: 2px solid #F1F4F0;\n    border-radius: 5px;\n    background-color: #3e6f62;\n    color: #F1F4F0;\n    font-size: calc(8.57px + 0.446429vw);\n    font-weight: 600;\n    line-height: 1;\n    opacity: 0.2;\n    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;*\/\n}<\/p>\n<p>  .ry-vslider__num { margin: 0 0 20px; }<\/p>\n<p>  .ry-vslider__title {\n    margin: 0px;\n    font-family: var(--ry-vs-font-title);\n    font-weight: 300!important;\n      font-family: \"Aptos-Light\";\n    font-size: 32px;\n    line-height: 36px;\n    letter-spacing: -0.03em;\n    color: inherit;\n  }\n  .ry-vslider__title strong {\n    font-family: var(--ry-vs-font-strong);\n    font-weight: 300;\n  }<\/p>\n<p>  .ry-vslider__line {\n    width: 0;\n    height: 1px;\n    margin: 0 0 2px;\n    background: var(--ry-vs-ink);\n    transition: width 1.8s;\n  }\n  .ry-vslider__line{\n    max-width:700px;\n  }\n    .ry-vslider__title, .ry-vslider__text{\nmax-width:540px;\n}\n  .ry-vslider__line.is-in { width: 100%; }<\/p>\n<p>  .ry-vslider__text {\n    font-family: var(--ry-vs-font-text);\n    font-size: 20px;\n    letter-spacing: -0.03em;\n      line-height:30px;\n  }\n  .ry-vslider__text p { margin: 0; }\n  .ry-vslider__text p + p { margin-top: 1em; }<\/p>\n<p>  \/* Reveal di titolo e testo: entrano dal basso con fade (1.2s come il reference) *\/\n  .ry-vslider__reveal {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: transform 1.2s, opacity 0.6s;\n  }\n  .ry-vslider__reveal.is-in { opacity: 1; transform: translate(0, 0); }<\/p>\n<p>  \/* ---------- Palco agganciato (solo desktop, riempito e pinnato dal JS) ---------- *\/\n  .ry-vslider__track {\n    display: none;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: var(--ry-vs-inset);\n    right: var(--ry-vs-inset);\n    z-index: 2;\n    pointer-events: none;\n  }\n  .ry-vslider.is-ready .ry-vslider__track { display: block; }\n  .ry-vslider.is-ready .ry-vslider__num { display: none; }   \/* il numero sta sulla linea *\/\n  .ry-vslider__stage {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    column-gap: var(--ry-vs-gap);\n    will-change: transform;\n  }\n  \/* Aggancio con position: sticky: lo tiene fermo il browser (compositor),\n     quindi niente tremolio su touch, dove lo scroll non passa da JS.\n     La classe la mette il JS; il binario (.ry-vslider__track) riceve dal JS\n     l'altezza esatta, cosi' lo sgancio avviene quando l'ultimo step arriva\n     alla quota. Senza is-sticky resta il pin a transform di ScrollTrigger. *\/\n  .ry-vslider.is-sticky .ry-vslider__stage {\n    position: sticky;\n    top: var(--ry-vs-top);\n  }\n  .ry-vslider__gutter { grid-column: 1 \/ span 1; position: relative; }<\/p>\n<p>  \/* Linea verticale: centrata sul numero, sul bordo sinistro della colonna 1 *\/\n  .ry-vslider__rail {\n    position: absolute;\n    top: 0;\n    left: calc(var(--ry-vs-badge-x) + var(--ry-vs-badge) \/ 2 - 0.5px + var(--ry-vs-rail-shift));\n    width: 1px;\n    height: var(--ry-vs-rail-h);\n    background: var(--ry-vs-ink-soft);\n  }\n  .ry-vslider__rail-fill {\n    position: absolute;\n    top: 0;\n    left: -0.5px;\n    width: 2px;\n    height: 0;\n    background: var(--ry-vs-ink);\n  }<\/p>\n<p>  \/* Numero: i 6 span sono sovrapposti, si accende quello dello step corrente *\/\n  .ry-vslider__badge {\n    position: absolute;\n    top: 0;\n    left: var(--ry-vs-badge-x);\n    width: var(--ry-vs-badge);\n    height: var(--ry-vs-badge);\n  }\n  .ry-vslider__badge span {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n  }\n  .ry-vslider__badge span.is-on { opacity: 1; }<\/p>\n<p>  \/* Pila immagini: entra con scale 0.5 -> 1 (stessa curva del reference) *\/\n  .ry-vslider__media {\n    grid-column: var(--ry-vs-cols-media);\n    position: relative;\n    aspect-ratio: var(--ry-vs-ratio);\n    overflow: hidden;\n    transform: scale(0.5);\n    transition: transform 1.5s cubic-bezier(0.17, 0.84, 0.53, 0.86);\n  }\n  .ry-vslider__media.is-in { transform: scale(1); }<\/p>\n<p>  \/* Pila: contiene tutte le slide. Durante lo scambio riceve dal JS il\n     filtro SVG di displacement (dissolvenza liquida) e un leggero zoom,\n     che tiene i bordi deformati fuori dal ritaglio della cornice. *\/\n  .ry-vslider__stack {\n    position: absolute;\n    inset: 0;\n    transform-origin: center center;\n    will-change: transform;\n  }\n  .ry-vslider__slide,\n  .ry-vslider__zoom,\n  .ry-vslider__blur {\n    position: absolute;\n    inset: 0;\n  }\n  .ry-vslider__slide { overflow: hidden; }\n  \/* Le immagini dopo la prima partono trasparenti: ognuna si dissolve\n     sopra la precedente (via GSAP, legata allo scroll). *\/\n  .ry-vslider__slide:not(:first-child) { opacity: 0; }\n  .ry-vslider__zoom { transform-origin: center center; }<\/p>\n<p>  .ry-vslider__slide img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    opacity: 0;\n    filter: blur(8px);\n    transition: opacity 0.4s cubic-bezier(0.17, 0.84, 0.53, 0.86), filter 1.5s;\n  }\n  .ry-vslider__media.is-in .ry-vslider__slide img { opacity: 1; filter: blur(0px); }<\/p>\n<p>  \/* ---------- Marker: box dentro lo stage pinnato, allineato alla media\n     dal JS. Seguono la pila come le immagini (fermi durante il pin, poi\n     via con lei). Appesi allo stage, che non ha overflow hidden, cosi'\n     le --y negative non vengono tagliate. ---------- *\/\n  .ry-vslider__markers {\n    display: none;\n    position: absolute;\n    z-index: 3;\n    pointer-events: none;\n  }\n  .ry-vslider.is-ready .ry-vslider__markers { display: block; }\n  @media (max-width: 1023.98px) {\n    .ry-vslider__markers { display: none !important; }\n  }<\/p>\n<p>  @media (min-width: 640px) {\n    .ry-vslider { --ry-vs-inset: 30px; }\n  }\n  @media (min-width: 960px) {\n    .ry-vslider { --ry-vs-inset: 40px; }\n  }<\/p>\n<p>  \/* ---------- Tablet e mobile: linea e numeri a sinistra (agganciati\n     allo scroll come su desktop), immagine 500x350 sopra al titolo,\n     poi titolo e testo. La pila immagini non c'e'. ---------- *\/\n  @media (max-width: 1023.98px) {\n    \/* Solo gli step lasciano spazio a linea e numero: la testata resta a\n       tutta larghezza, allineata al resto della pagina. *\/\n    .ry-vslider.is-ready .ry-vslider__items { padding-left: var(--ry-vs-gutter-m); }\n    .ry-vslider.is-ready .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\n    .ry-vslider.is-ready .ry-vslider__item--last { margin-bottom: 0px; padding-top: 80px;}<\/p>\n<p>    .ry-vslider__figure { width: 100%; max-width: var(--ry-vs-figure-w); }\n    .ry-vslider__figure img { aspect-ratio: var(--ry-vs-figure-ratio); }<\/p>\n<p>    .ry-vslider__stage { display: block; }\n    .ry-vslider__gutter { height: var(--ry-vs-rail-m); }\n    .ry-vslider__media { display: none; }<\/p>\n<p>    .ry-vslider__title {\n      margin-bottom: 10px;\n    }<\/p>\n<p>  .ry-vslider__line {\n  margin-bottom: 20px;\n  }\n  }<\/p>\n<p>  \/* ---------- Desktop ---------- *\/\n  @media (min-width: 1024px) {\n    .ry-vslider__item { margin-bottom: var(--ry-vs-space); }\n    .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\n    .ry-vslider__item--last { margin-bottom: 0; padding-top: 60px; }<\/p>\n<p>    .ry-vslider__body { grid-column: var(--ry-vs-cols-text); grid-row: 1; }\n    \/* Senza JS l'immagine di ogni step resta visibile a destra (fallback statico) *\/\n    .ry-vslider__figure { grid-column: var(--ry-vs-cols-media); grid-row: 1; margin: 0; }\n    .ry-vslider.is-ready .ry-vslider__figure { display: none; }<\/p>\n<p>    .ry-vslider__title {\n      margin-bottom: 10px;\n      \/*font-size: clamp(38px, 3.2vw, 62px);*\/\n      \/*line-height: clamp(42px, 3.475vw, 68px);*\/\n    }\n    .ry-vslider__line { margin-bottom: 40px; }\n  }<\/p>\n<p>  \/* ---------- Motion ridotta: solo fade brevi, niente slide\/blur\/scale ---------- *\/\n  @media (prefers-reduced-motion: reduce) {\n    .ry-vslider__reveal { transform: none; transition: opacity 0.3s; }\n    .ry-vslider__line { transition: none; }\n    .ry-vslider__media { transform: none; transition: none; }\n    .ry-vslider__slide img { filter: none; transition: opacity 0.3s; }\n  }<\/p>\n<p>  \/* ---------- Marker (stile): incollato dal CSS globale del sito, qui\n     replicato per completezza del blocco. ---------- *\/\n  .rt-marker {\n    position: absolute;\n    left: var(--x);\n    top: var(--y);\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    border: 1px solid rgba(255, 255, 255, .35);\n    background-color: rgba(241, 244, 240, 0.5);\n    -webkit-backdrop-filter: blur(4px);\n    backdrop-filter: blur(4px);\n    color: #192B35;\n    pointer-events: none;\n  }\n  .rt-marker::before {\n    content: \"\";\n    width: 8px;\n    height: 8px;\n    border-radius: 100%;\n    background-color: currentColor;\n  }\n  .padding-testo{\n    padding-top: 10px;\n  }\n<\/style>\n<section class=\"ry-vslider\" id=\"ry-vslider\">\n<p>  <!-- Testata fissa (desktop): stessi elementi e classi del builder.\n       Il wrapper e' il binario della testata: il JS lo fa finire dove\n       arriva l'ultimo step, cosi' testata, immagine e ultimo testo si\n       sganciano insieme e restano visibili fino alla fine. --><\/p>\n<div class=\"ry-vslider__headwrap\">\n<div class=\"ry-vslider__head\">\n<div class=\"uk-h5 uk-text-primary uk-margin-small-bottom uk-width-small\" uk-parallax=\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\">[ 06. ]<\/div>\n<h3 class=\"uk-heading-large ry-blur uk-margin-remove-top\">Dal brief all\u2019output,<br class=\"uk-visible@m\">ogni fase ha un metodo.<\/h3>\n<div class=\"ry-vslider__head-row\">\n<div class=\"ry-vslider__head-right\">\n<div>\n<div class=\"divider is-visible\"><\/div>\n<\/div>\n<div class=\"uk-h6 uk-margin\" uk-parallax=\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\"><span class=\"label-dot\">Metodo scientifico e partnership<\/span><\/div>\n<div class=\"uk-panel paragrafo padding-testo testi-effect uk-margin-default-top uk-text-left\" uk-parallax=\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\">Reytera trasforma un\u2019esigenza industriale in un percorso condiviso di sviluppo. Competenze botaniche, estrattive e analitiche accompagnano il progetto fino a un output verificato rispetto alle specifiche condivise.<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>  <!-- Palco sticky: lo riempie il JS (linea, numeri, pila immagini) --><\/p>\n<div class=\"ry-vslider__track\" aria-hidden=\"true\">\n<div class=\"ry-vslider__stage\">\n<div class=\"ry-vslider__gutter\">\n<div class=\"ry-vslider__rail\">\n<div class=\"ry-vslider__rail-fill\"><\/div>\n<\/div>\n<div class=\"ry-vslider__badge\"><\/div>\n<\/p><\/div>\n<div class=\"ry-vslider__media\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"ry-vslider__items\">\n<p>    <!-- SEGNAPOSTO: testi e immagini dei 6 step sono di esempio --><\/p>\n<article class=\"ry-vslider__item\">\n<div class=\"ry-vslider__figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/brief-2-img.jpeg\" width=\"1200\" height=\"800\" loading=\"lazy\" alt=\"\">\n      <\/div>\n<div class=\"ry-vslider__body\">\n        <span class=\"ry-vslider__num\">1<\/span><\/p>\n<h3 class=\"ry-vslider__title ry-vslider__reveal uk-h2\">Brief con cliente<\/h3>\n<div class=\"ry-vslider__line\"><\/div>\n<div class=\"ry-vslider__text ry-vslider__reveal\">\n<p>Definiamo obiettivi, formato, performance attese e principali vincoli tecnici e industriali del progetto.<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"ry-vslider__item\">\n<div class=\"ry-vslider__figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/Botanist_2.jpeg\" width=\"1200\" height=\"800\" loading=\"lazy\" alt=\"\">\n      <\/div>\n<div class=\"ry-vslider__body\">\n        <span class=\"ry-vslider__num\">2<\/span><\/p>\n<h3 class=\"ry-vslider__title ry-vslider__reveal\">Sviluppo botanico<\/h3>\n<div class=\"ry-vslider__line\"><\/div>\n<div class=\"ry-vslider__text ry-vslider__reveal\">\n<p>Selezioniamo la botanica e definiamo il protocollo agronomico pi\u00f9 coerente con il profilo richiesto.<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"ry-vslider__item\">\n<div class=\"ry-vslider__figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/Definizione-del-processo-img.jpeg\" width=\"1200\" height=\"800\" loading=\"lazy\" alt=\"\">\n      <\/div>\n<div class=\"ry-vslider__body\">\n        <span class=\"ry-vslider__num\">3<\/span><\/p>\n<h3 class=\"ry-vslider__title ry-vslider__reveal\">Definizione del processo<\/h3>\n<div class=\"ry-vslider__line\"><\/div>\n<div class=\"ry-vslider__text ry-vslider__reveal\">\n<p>Costruiamo il percorso pi\u00f9 coerente con la matrice e con l\u2019output richiesto: fresco, essiccato o estratto.<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"ry-vslider__item\">\n<div class=\"ry-vslider__figure\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/defenizione-img.jpeg\" width=\"1200\" height=\"800\" loading=\"lazy\" alt=\"\">\n      <\/div>\n<div class=\"ry-vslider__body\">\n        <span class=\"ry-vslider__num\">4<\/span><\/p>\n<h3 class=\"ry-vslider__title ry-vslider__reveal\">Analisi e caratterizzazione<\/h3>\n<div class=\"ry-vslider__line\"><\/div>\n<div class=\"ry-vslider__text ry-vslider__reveal\">\n<p>Analizziamo e caratterizziamo l\u2019output per verificarne i parametri rilevanti rispetto alle specifiche del progetto.<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"ry-vslider__item\">\n<div class=\"ry-vslider__figure\">\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire --><br \/>\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/validazzione-img-1.jpeg\" width=\"1200\" height=\"800\" loading=\"lazy\" alt=\"\">\n      <\/div>\n<div class=\"ry-vslider__body\">\n        <span class=\"ry-vslider__num\">5<\/span><\/p>\n<h3 class=\"ry-vslider__title ry-vslider__reveal\">Validazione<\/h3>\n<div class=\"ry-vslider__line\"><\/div>\n<div class=\"ry-vslider__text ry-vslider__reveal\">\n<p>Confrontiamo i risultati con le specifiche condivise e, quando necessario, perfezioniamo il processo fino alla validazione finale.<\/p>\n<\/div><\/div>\n<\/article>\n<article class=\"ry-vslider__item\">\n<div class=\"ry-vslider__figure\">\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire --><br \/>\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/output-finale-img.jpeg\" width=\"1200\" height=\"800\" loading=\"lazy\" alt=\"\">\n      <\/div>\n<div class=\"ry-vslider__body\">\n        <span class=\"ry-vslider__num\">6<\/span><\/p>\n<h3 class=\"ry-vslider__title ry-vslider__reveal\">Output finale<\/h3>\n<div class=\"ry-vslider__line\"><\/div>\n<div class=\"ry-vslider__text ry-vslider__reveal\">\n<p>Il percorso si conclude con un output controllato, caratterizzato e sviluppato per integrarsi nel processo industriale del cliente.<\/p>\n<\/div><\/div>\n<\/article><\/div>\n<\/section>\n<p><script>\n(function () {\n  'use strict';<\/p>\n<p>  \/* Nota di stile: niente doppia e-commerciale, niente segno \"minore di\"\n     e niente backslash nel JS, cosi' il blocco HTML del builder arriva\n     in pagina integro (i cicli usano \"n > i\", le condizioni if annidati). *\/<\/p>\n<p>  var ROOT_SEL = '.ry-vslider';\n  var DESKTOP_MQ = '(min-width: 1024px)';   \/* stessa soglia del CSS *\/\n  var MOBILE_MQ = '(max-width: 1023.98px)';\n  var SWAP_AT = 10;        \/* % viewport: lo step inizia a cedere l'immagine quando il suo top e' a 10vh *\/\n  var TEXT_IN_WINDOW = 12; \/* % viewport: senza testata fissa, tratto oltre la quota in cui il testo corrente sparisce e appare il successivo (con la testata vale --ry-vs-head-gap) *\/\n  var SWAP_LEN = 15;       \/* % viewport: con la testata fissa, lunghezza dello scambio immagine (parte quando il testo comincia a sfumare) *\/\n  \/* Dissolvenza liquida (solo desktop): filtro SVG feTurbulence + feDisplacementMap *\/\n  var LIQUID_PEAK = 60;              \/* intensita' massima dello spostamento (attributo scale del displacement), a meta' scambio *\/\n  var LIQUID_ZOOM = 1.1;             \/* zoom della pila a meta' scambio: tiene i bordi deformati fuori dalla cornice *\/\n  var LIQUID_FREQ = '0.012 0.018';   \/* frequenza della turbolenza (piu' bassa = onde piu' larghe) *\/\n  var LIQUID_OCTAVES = 2;\n  var MOBILE_DIM = 0.5;    \/* tablet e mobile: opacita' a cui si attenua il blocco (immagine + testo) che sale oltre il numero *\/\n  var MOBILE_DIM_RANGE = 20; \/* % viewport: tratto oltre la quota in cui avviene l'attenuazione *\/\n  var REVEAL_AT = 'top 90%';<\/p>\n<p>  \/* Marker: coordinate x\/y (le classi uk-visible@s \/ uk-hidden@s\n     restano nel markup per lo switch di breakpoint UIkit). *\/\n  var MARKERS_HTML =\n    '<span class=\"rt-marker uk-visible@s\" style=\"--x:43%; --y:0px; \" aria-hidden=\"true\"><\/span>' +\n    '<span class=\"rt-marker uk-visible@s\" style=\"--x:-5px; --y:120px;\" aria-hidden=\"true\"><\/span>' +\n    '<span class=\"rt-marker uk-visible@s\" style=\"--x:69%; --y:220px;\" aria-hidden=\"true\"><\/span>' +\n    '<span class=\"rt-marker uk-hidden@s\" style=\"--x:65%; --y:-280px;\" aria-hidden=\"true\"><\/span>' +\n    '<span class=\"rt-marker uk-hidden@s\" style=\"--x:10%; --y:-180px;\" aria-hidden=\"true\"><\/span>' +\n    '<span class=\"rt-marker uk-hidden@s\" style=\"--x:70%; --y:-180px;\" aria-hidden=\"true\"><\/span>';<\/p>\n<p>  if (window.ryVsliderAttivo) { return; }\n  window.ryVsliderAttivo = true;<\/p>\n<p>  \/* GSAP e ScrollTrigger dovrebbero esserci gia' (tema\/plugin). Se dopo\n     il load mancano ancora, si caricano da CDN come rete di sicurezza. *\/\n  var gsapLoading = false;\n  function hasGsap() {\n    if (typeof gsap === 'undefined') { return false; }\n    if (typeof ScrollTrigger === 'undefined') { return false; }\n    return true;\n  }\n  function ensureGsap(done) {\n    if (hasGsap()) { return done(); }\n    if (document.readyState !== 'complete') {\n      window.addEventListener('load', function () { ensureGsap(done); }, { once: true });\n      return;\n    }\n    if (gsapLoading) { return; }\n    gsapLoading = true;\n    var base = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/';\n    function load(src, next) {\n      var s = document.createElement('script');\n      s.src = base + src;\n      s.onload = next;\n      document.head.appendChild(s);\n    }\n    load('gsap.min.js', function () { load('ScrollTrigger.min.js', done); });\n  }<\/p>\n<p>  \/* Lenis: sul sito e' creato in uno script inline con \"const lenis = new\n     Lenis(...)\": non sta su window, ma una const globale e' visibile\n     anche da qui. Agganciando ScrollTrigger.update al suo evento\n     \"scroll\", il pin viene aggiornato nello stesso frame in cui Lenis\n     muove la pagina: senza questo aggancio ScrollTrigger reagirebbe\n     all'evento scroll nativo un frame dopo, e la linea da 1px tremerebbe. *\/\n  function findLenis() {\n    if (window.lenis) { return window.lenis; }\n    try {\n      if (typeof lenis !== 'undefined') { return lenis; }\n    } catch (e) { \/* const ancora non inizializzata: nessun Lenis *\/ }\n    return null;\n  }\n  function integrateLenis() {\n    var instance = findLenis();\n    if (!instance) { return window; }\n    if (typeof instance.on !== 'function') { return window; }<\/p>\n<p>    var wrapper = window;\n    if (instance.options) { if (instance.options.wrapper) { wrapper = instance.options.wrapper; } }\n    var isWindowScroll = false;\n    if (wrapper === window) { isWindowScroll = true; }\n    if (wrapper === document.documentElement) { isWindowScroll = true; }\n    if (wrapper === document.body) { isWindowScroll = true; }<\/p>\n<p>    if (isWindowScroll) {\n      instance.on('scroll', ScrollTrigger.update);\n      console.log('[ry-vslider] Lenis sincronizzato con ScrollTrigger');\n      return window;\n    }<\/p>\n<p>    ScrollTrigger.scrollerProxy(wrapper, {\n      scrollTop: function (value) {\n        if (arguments.length) { instance.scrollTo(value, { immediate: true }); }\n        return instance.scroll || 0;\n      },\n      getBoundingClientRect: function () {\n        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };\n      },\n      pinType: wrapper.style.transform ? 'transform' : 'fixed'\n    });\n    instance.on('scroll', ScrollTrigger.update);\n    ScrollTrigger.defaults({ scroller: wrapper });\n    return wrapper;\n  }<\/p>\n<p>  function toArray(list) { return Array.prototype.slice.call(list); }<\/p>\n<p>  function make(tag, className) {\n    var node = document.createElement(tag);\n    if (className) { node.className = className; }\n    return node;\n  }<\/p>\n<p>  \/* Filtro SVG per la dissolvenza liquida: turbolenza (rumore statico) +\n     displacement map con scale 0; il JS anima scale durante lo scambio.\n     Creato via DOM (niente markup), un filtro per sezione. *\/\n  var SVG_NS = 'http:\/\/www.w3.org\/2000\/svg';\n  var liquidCount = 0;\n  function buildLiquidFilter(root) {\n    liquidCount += 1;\n    var id = 'ry-liquid-' + liquidCount;\n    var svg = document.createElementNS(SVG_NS, 'svg');\n    svg.setAttribute('width', '0');\n    svg.setAttribute('height', '0');\n    svg.setAttribute('aria-hidden', 'true');\n    svg.style.position = 'absolute';\n    var filter = document.createElementNS(SVG_NS, 'filter');\n    filter.setAttribute('id', id);\n    filter.setAttribute('x', '-20%');\n    filter.setAttribute('y', '-20%');\n    filter.setAttribute('width', '140%');\n    filter.setAttribute('height', '140%');\n    filter.setAttribute('color-interpolation-filters', 'sRGB');\n    var turb = document.createElementNS(SVG_NS, 'feTurbulence');\n    turb.setAttribute('type', 'fractalNoise');\n    turb.setAttribute('baseFrequency', LIQUID_FREQ);\n    turb.setAttribute('numOctaves', String(LIQUID_OCTAVES));\n    turb.setAttribute('seed', '7');\n    turb.setAttribute('result', 'noise');\n    var disp = document.createElementNS(SVG_NS, 'feDisplacementMap');\n    disp.setAttribute('in', 'SourceGraphic');\n    disp.setAttribute('in2', 'noise');\n    disp.setAttribute('scale', '0');\n    disp.setAttribute('xChannelSelector', 'R');\n    disp.setAttribute('yChannelSelector', 'G');\n    filter.appendChild(turb);\n    filter.appendChild(disp);\n    svg.appendChild(filter);\n    root.appendChild(svg);\n    return { id: id, disp: disp };\n  }<\/p>\n<p>  \/* Costruisce il palco: una slide per step (clone dell'immagine dello\n     step) dentro la pila, un numero per step, e le classi penultimo\/ultimo. *\/\n  function build(root, items) {\n    var media = root.querySelector('.ry-vslider__media');\n    var badge = root.querySelector('.ry-vslider__badge');\n    var count = items.length;\n    var slides = [];\n    var nums = [];\n    var stack = make('div', 'ry-vslider__stack');\n    media.appendChild(stack);<\/p>\n<p>    items.forEach(function (item, i) {\n      var source = item.querySelector('.ry-vslider__figure img');\n      var slide = make('div', 'ry-vslider__slide');\n      var zoom = make('div', 'ry-vslider__zoom');\n      var blur = make('div', 'ry-vslider__blur');\n      var img = source ? source.cloneNode(true) : make('img');\n      slide.style.zIndex = String(i + 1);   \/* ogni immagine si dissolve sopra la precedente *\/\n      if (i === 0) { img.setAttribute('loading', 'eager'); }\n      img.setAttribute('alt', '');\n      blur.appendChild(img);\n      zoom.appendChild(blur);\n      slide.appendChild(zoom);\n      stack.appendChild(slide);\n      slides.push(slide);<\/p>\n<p>      var num = make('span', i === 0 ? 'is-on' : '');\n      num.textContent = String(i + 1);\n      badge.appendChild(num);\n      nums.push(num);\n    });<\/p>\n<p>    if (count > 1) { items[count - 2].classList.add('ry-vslider__item--penult'); }\n    items[count - 1].classList.add('ry-vslider__item--last');<\/p>\n<p>    return { slides: slides, nums: nums, stack: stack };\n  }<\/p>\n<p>  function setup(root, scroller, reduced) {\n    var items = toArray(root.querySelectorAll('.ry-vslider__item'));\n    var count = items.length;\n    if (count === 0) { return; }<\/p>\n<p>    var built = build(root, items);\n    var slides = built.slides;\n    var nums = built.nums;\n    var stack = built.stack;\n    var liquid = null;\n    if (!reduced) { liquid = buildLiquidFilter(root); }\n    var track = root.querySelector('.ry-vslider__track');\n    var stage = root.querySelector('.ry-vslider__stage');\n    var media = root.querySelector('.ry-vslider__media');\n    var fill = root.querySelector('.ry-vslider__rail-fill');\n    var lastBody = items[count - 1].querySelector('.ry-vslider__body');\n    var itemsEl = root.querySelector('.ry-vslider__items');\n    var head = root.querySelector('.ry-vslider__head');\n    var headwrap = root.querySelector('.ry-vslider__headwrap');\n    root.classList.add('is-ready');<\/p>\n<p>    \/* Testata fissa: se non ha un colore di sfondo suo, prende quello del\n       primo contenitore che ne ha uno, cosi' i testi che le scorrono sotto\n       spariscono davvero. *\/\n    if (head) {\n      var headBg = getComputedStyle(head).backgroundColor;\n      var isClear = false;\n      if (headBg === 'transparent') { isClear = true; }\n      if (headBg === 'rgba(0, 0, 0, 0)') { isClear = true; }\n      if (isClear) {\n        var bgEl = root;\n        while (bgEl) {\n          if (bgEl === document.documentElement) { break; }\n          var c = getComputedStyle(bgEl).backgroundColor;\n          if (c !== 'transparent') { if (c !== 'rgba(0, 0, 0, 0)') { head.style.backgroundColor = c; break; } }\n          bgEl = bgEl.parentElement;\n        }\n      }\n    }<\/p>\n<p>    \/* Modalita' di aggancio. Default: position sticky (nessun tremolio su\n       touch: lo scroll del compositor e lo sticky sono nello stesso frame,\n       il pin a transform arriva un frame dopo). Lo sticky si annulla\n       dentro un antenato con overflow hidden: quegli antenati passano a\n       overflow clip, che ritaglia uguale ma non blocca lo sticky.\n       data-ry-pin=\"transform\" sulla section forza il vecchio pin. *\/\n    var useSticky = root.getAttribute('data-ry-pin') !== 'transform';\n    if (useSticky) {\n      if (!window.CSS) { useSticky = false; }\n      else if (!CSS.supports('overflow', 'clip')) { useSticky = false; }\n    }\n    if (useSticky) {\n      var anc = root.parentElement;\n      while (anc) {\n        if (anc === document.body) { break; }\n        var ov = getComputedStyle(anc);\n        if (ov.overflowX === 'hidden') { anc.style.overflowX = 'clip'; }\n        if (ov.overflowY === 'hidden') { anc.style.overflowY = 'clip'; }\n        anc = anc.parentElement;\n      }\n      root.classList.add('is-sticky');\n    }<\/p>\n<p>    \/* Marker dentro il palco pinnato (.ry-vslider__stage): seguono la pila\n       come le immagini (fermi durante il pin, poi via con lei). Allineati\n       alla colonna media, ma appesi allo stage (che non ha overflow hidden)\n       cosi' le --y negative non vengono tagliate. *\/\n    var markers = make('div', 'ry-vslider__markers');\n    markers.innerHTML = MARKERS_HTML;\n    stage.appendChild(markers);<\/p>\n<p>    function placeMarkers() {\n      var mediaRect = media.getBoundingClientRect();\n      var stageRect = stage.getBoundingClientRect();\n      markers.style.left = (mediaRect.left - stageRect.left) + 'px';\n      markers.style.top = (mediaRect.top - stageRect.top) + 'px';\n      markers.style.width = mediaRect.width + 'px';\n      markers.style.height = mediaRect.height + 'px';\n    }\n    placeMarkers();\n    ScrollTrigger.addEventListener('refresh', placeMarkers);\n    window.addEventListener('resize', placeMarkers);<\/p>\n<p>    \/* ---- Reveal (tutti i breakpoint): titolo, testo, riga ---- *\/\n    var revealEls = toArray(root.querySelectorAll('.ry-vslider__reveal, .ry-vslider__line'));\n    revealEls.forEach(function (el) {\n      if (reduced) { el.classList.add('is-in'); return; }\n      ScrollTrigger.create({\n        trigger: el,\n        scroller: scroller,\n        start: REVEAL_AT,\n        once: true,\n        onEnter: function () { el.classList.add('is-in'); }\n      });\n    });<\/p>\n<p>    \/* ---- Aggancio, linea e numeri su tutti i breakpoint; su desktop\n       anche la pila immagini con le transizioni ---- *\/\n    var mm = gsap.matchMedia();\n    mm.add(DESKTOP_MQ, function () { return setupPinned(true); });\n    mm.add(MOBILE_MQ, function () { return setupPinned(false); });<\/p>\n<p>    \/* Primo elemento visibile di uno step: su tablet\/mobile l'immagine\n       (sta sopra al titolo), su desktop il blocco testo (l'immagine del\n       singolo step e' nascosta, c'e' la pila). E' il riferimento per\n       accendere il numero e per la fine dell'aggancio. *\/\n    function contentTop(item, isDesktop) {\n      var body = item.querySelector('.ry-vslider__body');\n      if (isDesktop) { return body; }\n      return item.querySelector('.ry-vslider__figure') || body;\n    }<\/p>\n<p>    function setupPinned(isDesktop) {\n      var lastTop = contentTop(items[count - 1], isDesktop);<\/p>\n<p>      \/* Quota di aggancio in px, dalla variabile --ry-vs-top (vh, % o px) *\/\n      function stickPx() {\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-top').trim();\n        var n = parseFloat(raw);\n        if (isNaN(n)) { return window.innerHeight * 0.2; }\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\n        if (raw.indexOf('%') > -1) { return window.innerHeight * n \/ 100; }\n        return n;\n      }\n      function stickStart() { return 'top ' + stickPx() + 'px'; }\n      \/* Quota della testata fissa in px (variabile --ry-vs-head-top) *\/\n      function headTopPx() {\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-head-top').trim();\n        var n = parseFloat(raw);\n        if (isNaN(n)) { return 0; }\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\n        return n;\n      }<\/p>\n<p>      \/* Prima di ogni misura di ScrollTrigger:\n         1) gli antenati con transform (es. il pannello con uk-parallax\n            \"scale: 0.9,1\") vengono azzerati, altrimenti start, end e\n            dimensioni del pin escono scalati o spostati. Vengono\n            ripristinati appena la misura e' finita;\n         2) l'ultimo step e' alto almeno quanto il palco (immagine su\n            desktop, linea su mobile), cosi' il palco una volta sganciato\n            non sporge sotto la section. *\/\n      var transformed = [];\n      function beforeMeasure() {\n        transformed = [];\n        var el = root.parentElement;\n        while (el) {\n          if (el === document.body) { break; }\n          if (getComputedStyle(el).transform !== 'none') {\n            transformed.push({ el: el, inline: el.style.transform });\n            el.style.transform = 'none';\n          }\n          el = el.parentElement;\n        }\n        var offset = lastBody.getBoundingClientRect().top - lastTop.getBoundingClientRect().top;\n        lastBody.style.minHeight = Math.max(0, Math.round(stage.offsetHeight - offset)) + 'px';\n        \/* Con la testata fissa (desktop): la quota di aggancio e' il suo\n           bordo inferiore; gli step partono sotto di lei (padding-top);\n           il suo binario finisce dove arriva l'ultimo step, cosi' si\n           sgancia nello stesso istante del palco e da li' testata,\n           immagine e ultimo testo scorrono insieme. Il binario del palco\n           parte dal primo step, non dalla cima della section. *\/\n        var rootTop = root.getBoundingClientRect().top;\n        if (isDesktop) {\n          if (head) {\n            var headH = head.offsetHeight;\n            root.style.setProperty('--ry-vs-top', Math.round(headH + headTopPx()) + 'px');\n            itemsEl.style.paddingTop = headH + 'px';\n            if (headwrap) { headwrap.style.height = Math.round(lastTop.getBoundingClientRect().top - rootTop) + 'px'; }\n          }\n        } else {\n          root.style.removeProperty('--ry-vs-top');\n          itemsEl.style.paddingTop = '';\n          if (headwrap) { headwrap.style.height = ''; }\n        }\n        var itemsTop = items[0].getBoundingClientRect().top;\n        track.style.top = Math.round(itemsTop - rootTop) + 'px';\n        \/* Sticky: il binario finisce dove il contenuto dell'ultimo step\n           arriva alla quota, piu' l'altezza del palco (sgancio esatto). *\/\n        if (useSticky) {\n          var trackEnd = lastTop.getBoundingClientRect().top - itemsTop + stage.offsetHeight;\n          track.style.bottom = 'auto';\n          track.style.height = Math.round(trackEnd) + 'px';\n        }\n      }\n      function afterMeasure() {\n        transformed.forEach(function (t) { t.el.style.transform = t.inline; });\n        transformed = [];\n      }\n      ScrollTrigger.addEventListener('refreshInit', beforeMeasure);\n      ScrollTrigger.addEventListener('refresh', afterMeasure);<\/p>\n<p>      \/* Aggancio del palco senza sticky (solo se forzato o se il browser\n         non supporta overflow clip): pin di ScrollTrigger dalla quota\n         --ry-vs-top fino a quando il contenuto dell'ultimo step arriva\n         alla stessa quota. pinSpacing false: il palco vive in un overlay\n         assoluto, non deve aggiungere spazio. *\/\n      if (!useSticky) {\n        ScrollTrigger.create({\n          trigger: itemsEl,\n          scroller: scroller,\n          start: stickStart,\n          endTrigger: lastTop,\n          end: stickStart,\n          pin: stage,\n          pinSpacing: false,\n          pinType: 'transform'\n        });\n      }<\/p>\n<p>      \/* Linea: si riempie da quando il palco si aggancia a quando si sgancia *\/\n      gsap.fromTo(fill, { height: '0%' }, {\n        height: '100%',\n        ease: 'none',\n        scrollTrigger: {\n          trigger: itemsEl,\n          scroller: scroller,\n          start: stickStart,\n          endTrigger: lastTop,\n          end: stickStart,\n          scrub: true\n        }\n      });<\/p>\n<p>      \/* Con la testata fissa (solo desktop) la quota di aggancio e' il suo\n         bordo inferiore e il tratto in cui il testo sfuma e' lo spazio\n         sotto il paragrafo (--ry-vs-head-gap); senza testata il tratto\n         e' TEXT_IN_WINDOW. *\/\n      var withHead = false;\n      if (head) { if (isDesktop) { withHead = true; } }\n      function outLenPx() {\n        if (withHead) { return Math.max(1, parseFloat(getComputedStyle(head).paddingBottom) || 0); }\n        return Math.max(1, window.innerHeight * TEXT_IN_WINDOW \/ 100);\n      }<\/p>\n<p>      \/* Numeri 2..N (si spengono tornando indietro; il numero acceso piu'\n         recente copre i precedenti).\n         - Desktop: lo step corrente e' quello con testo e immagine in\n           vista, e il testo i entra mentre il testo i-1 sfuma sopra la\n           quota. Il numero i si accende a meta' di quel crossfade, cioe'\n           quando lo step i-1 e' salito di mezzo outLen oltre la quota,\n           in sincrono con testo e immagine.\n         - Tablet e mobile: il numero i si accende quando il suo step\n           (immagine) arriva alla quota della linea. *\/\n      items.forEach(function (item, i) {\n        if (i === 0) { return; }\n        var numTrigger = contentTop(item, isDesktop);\n        var numStart = stickStart;\n        if (isDesktop) {\n          numTrigger = contentTop(items[i - 1], true);\n          numStart = function () { return 'top ' + (stickPx() - outLenPx() \/ 2) + 'px'; };\n        }\n        ScrollTrigger.create({\n          trigger: numTrigger,\n          scroller: scroller,\n          start: numStart,\n          onEnter: function () { nums[i].classList.add('is-on'); },\n          onLeaveBack: function () { nums[i].classList.remove('is-on'); }\n        });\n      });<\/p>\n<p>      \/* Transizioni (solo desktop): nel tratto di scambio dello step i la\n         sua immagine lascia il posto alla successiva con la dissolvenza\n         liquida (vedi sotto). *\/\n      \/* Inizio dello scambio: a SWAP_AT% del viewport; con la testata fissa\n         il punto e' invece la quota di aggancio (il testo sparisce sotto\n         la testata, l'immagine lo segue subito). *\/\n      function swapTopPx() {\n        if (withHead) { return stickPx(); }\n        return window.innerHeight * SWAP_AT \/ 100;\n      }\n      function swapStart() { return 'top ' + swapTopPx() + 'px'; }\n      \/* Con la testata: scambio breve e fisso (SWAP_LEN), cosi' non si\n         sovrappone mai allo scambio dello step successivo e resta in\n         sincrono col testo. Senza: fino all'uscita dello step, come nel\n         reference. *\/\n      function swapEnd() {\n        if (withHead) { return 'top ' + (stickPx() - window.innerHeight * SWAP_LEN \/ 100) + 'px'; }\n        return 'bottom top';\n      }\n      function swapTrigger(item) {\n        return {\n          trigger: item,\n          scroller: scroller,\n          start: swapStart,\n          end: swapEnd,\n          scrub: true\n        };\n      }\n      if (isDesktop) {\n        \/* Reveal della pila (trigger = section, mai l'elemento agganciato) *\/\n        if (reduced) {\n          media.classList.add('is-in');\n        } else {\n          ScrollTrigger.create({\n            trigger: root,\n            scroller: scroller,\n            start: REVEAL_AT,\n            once: true,\n            onEnter: function () { media.classList.add('is-in'); }\n          });\n        }<\/p>\n<p>        \/* Dissolvenza liquida: l'immagine in arrivo si dissolve sopra la\n           corrente con un leggero zoom in uscita, mentre il displacement\n           sale a LIQUID_PEAK a meta' scambio e torna a 0; la pila zooma\n           fino a LIQUID_ZOOM e rientra, cosi' i bordi deformati restano\n           fuori dalla cornice. Il filtro e' attivo solo durante lo scambio\n           (costa alla GPU). Con motion ridotta: dissolvenza semplice. *\/\n        function liquidTrigger(item) {\n          var vars = swapTrigger(item);\n          if (liquid) {\n            vars.onToggle = function (self) {\n              stack.style.filter = self.isActive ? 'url(#' + liquid.id + ')' : '';\n            };\n          }\n          return vars;\n        }\n        for (var i = 0; count - 1 > i; i += 1) {\n          var next = slides[i + 1];\n          var tl = gsap.timeline({ scrollTrigger: liquidTrigger(items[i]) });\n          tl.to(next, { opacity: 1, ease: 'power1.inOut', duration: 1 }, 0);\n          tl.fromTo(next.querySelector('.ry-vslider__zoom'), { scale: 1.06 }, { scale: 1, ease: 'power2.out', duration: 1, immediateRender: false }, 0);\n          if (liquid) {\n            tl.to(liquid.disp, { attr: { scale: LIQUID_PEAK }, ease: 'sine.in', duration: 0.5 }, 0);\n            tl.to(liquid.disp, { attr: { scale: 0 }, ease: 'sine.out', duration: 0.5 }, 0.5);\n            tl.to(stack, { scale: LIQUID_ZOOM, ease: 'sine.in', duration: 0.5 }, 0);\n            tl.to(stack, { scale: 1, ease: 'sine.out', duration: 0.5 }, 0.5);\n          }\n        }<\/p>\n<p>        \/* Testi: uno solo visibile alla volta.\n           - Il testo corrente sfuma a 0 mentre il suo top sale oltre la\n             quota di aggancio, nel tratto \"outLen\" (vedi outLenPx sopra):\n             con la testata fissa arriva al paragrafo gia' trasparente.\n           - Il testo successivo appare esattamente mentre il precedente\n             sparisce (stessa curva, rovesciata) e resta pieno finche' non\n             tocca a lui salire oltre la quota.\n           - Tutti gli altri restano a 0. Il primo non sfuma in entrata,\n             l'ultimo non sfuma in uscita.\n           Opacita' calcolata dalle posizioni reali a ogni scroll: reversibile\n           e senza conflitti anche con step vicini. *\/\n        var bodies = items.map(function (item) { return item.querySelector('.ry-vslider__body'); });\n        \/* 0..1: quanto il testo k e' salito oltre la quota, sul tratto outLen *\/\n        function outProgress(k) {\n          var r = bodies[k].getBoundingClientRect();\n          var q = stickPx();\n          if (r.top >= q) { return 0; }\n          return Math.min(1, (q - r.top) \/ outLenPx());\n        }\n        function applyTextOpacity() {\n          bodies.forEach(function (body, k) {\n            var o = 1;\n            if (k > 0) { o = outProgress(k - 1); }\n            if (count - 1 > k) { o = Math.min(o, 1 - outProgress(k)); }\n            body.style.opacity = String(Math.max(0, Math.min(1, o)));\n          });\n        }\n        bodies.forEach(function (body) {\n          ScrollTrigger.create({\n            trigger: body,\n            scroller: scroller,\n            start: 'top bottom',\n            end: 'bottom top',\n            onUpdate: applyTextOpacity,\n            onToggle: applyTextOpacity,\n            onRefresh: applyTextOpacity\n          });\n        });\n        applyTextOpacity();\n      } else {\n        \/* Tablet e mobile: il blocco (immagine + testo) che sale oltre la\n           quota del numero si attenua gradualmente fino a MOBILE_DIM nel\n           tratto MOBILE_DIM_RANGE; l'ultimo resta pieno. Calcolato dalla\n           posizione reale a ogni scroll, reversibile. *\/\n        function applyItemOpacity() {\n          var q = stickPx();\n          var range = Math.max(1, window.innerHeight * MOBILE_DIM_RANGE \/ 100);\n          items.forEach(function (item, k) {\n            var o = 1;\n            if (count - 1 > k) {\n              var r = item.getBoundingClientRect();\n              if (q > r.top) {\n                var p = Math.min(1, (q - r.top) \/ range);\n                o = 1 - (1 - MOBILE_DIM) * p;\n              }\n            }\n            item.style.opacity = String(o);\n          });\n        }\n        items.forEach(function (item) {\n          ScrollTrigger.create({\n            trigger: item,\n            scroller: scroller,\n            start: 'top bottom',\n            end: 'bottom top',\n            onUpdate: applyItemOpacity,\n            onToggle: applyItemOpacity,\n            onRefresh: applyItemOpacity\n          });\n        });\n        applyItemOpacity();\n      }<\/p>\n<p>      \/* Se cambia l'altezza dei testi (font, immagini, resize) si ricalcola tutto *\/\n      var refreshTO;\n      function scheduleRefresh() {\n        clearTimeout(refreshTO);\n        refreshTO = setTimeout(function () { ScrollTrigger.refresh(); }, 120);\n      }\n      var observer = null;\n      if (typeof ResizeObserver !== 'undefined') {\n        observer = new ResizeObserver(scheduleRefresh);\n        observer.observe(root.querySelector('.ry-vslider__items'));\n      }<\/p>\n<p>      return function cleanup() {\n        ScrollTrigger.removeEventListener('refreshInit', beforeMeasure);\n        ScrollTrigger.removeEventListener('refresh', afterMeasure);\n        afterMeasure();\n        if (observer) { observer.disconnect(); }\n        clearTimeout(refreshTO);\n        lastBody.style.minHeight = '';\n        track.style.height = '';\n        track.style.bottom = '';\n        track.style.top = '';\n        root.style.removeProperty('--ry-vs-top');\n        itemsEl.style.paddingTop = '';\n        if (headwrap) { headwrap.style.height = ''; }\n        items.forEach(function (item) { item.querySelector('.ry-vslider__body').style.opacity = ''; item.style.opacity = ''; });\n        nums.forEach(function (num, i) { num.classList.toggle('is-on', i === 0); });\n      };\n    }\n  }<\/p>\n<p>  function init() {\n    gsap.registerPlugin(ScrollTrigger);\n    var scroller = integrateLenis();\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    var roots = toArray(document.querySelectorAll(ROOT_SEL));\n    roots.forEach(function (root) { setup(root, scroller, reduced); });\n    console.log('[ry-vslider] attivo su ' + roots.length + ' sezione\/i');<\/p>\n<p>    if (document.fonts) {\n      if (document.fonts.ready) { document.fonts.ready.then(function () { ScrollTrigger.refresh(); }); }\n    }\n    window.addEventListener('load', function () { ScrollTrigger.refresh(); }, { once: true });\n  }<\/p>\n<p>  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function () { ensureGsap(init); });\n  } else {\n    ensureGsap(init);\n  }\n})();\n<\/script><\/p>\n<\/div>\n<div>[ 07. ]<\/div>\n<h3>\nProgettata per le partnership<br \/>\nindustriali.<\/h3>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div><span class=\"label-dot\">Partnership industriali<br \/>\n<\/span><\/div>\n<div>Reytera affianca realt\u00e0 industriali che richiedono sviluppo su specifica, continuit\u00e0 e<br \/>\nriservatezza. Ogni collaborazione \u00e8 costruita intorno al brief, proteggendo informazioni,<br \/>\nprotocolli e risultati lungo l\u2019intero percorso.<\/div>\n<div>\n<style id=\"reytera-palette2-css\">.rt-palette2 {\r\n  --bg:      #F1F4F0;\r\n  --ink:     #192B35;\r\n  --petrol:  #192B35;\r\n  --line:    #3E6F62;\r\n  --biotech: #8FA99B;\r\n  --accent:  #3E6F62;\r\n  --grow:    3.24;\r\n  --dur:     .85s;\r\n  --ease:    cubic-bezier(.22, 1, .36, 1);\r\n  --h:       clamp(430px, 55vh, 600px);\r\n  --rt-palette2-font: \"Aptos\";\r\n  --rt-palette2-font-light: \"Aptos-Light\";\r\n\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  gap: 1px;\r\n  background: var(--line);\r\n  border-top: 1px solid var(--line);\r\n  border-bottom: 1px solid var(--line);\r\n  height: var(--h);\r\n  container-type: inline-size;\r\n\r\n  font-family: var(--rt-palette2-font, inherit);\r\n}\r\n\r\n.rt-palette2 *,\r\n.rt-palette2 *::before,\r\n.rt-palette2 *::after { box-sizing: inherit; }\r\n\r\n.rt-palette2__col {\r\n  position: relative;\r\n  flex: 1 1 0%;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  background: var(--bg);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  transition: flex-grow var(--dur) var(--ease);\r\n}\r\n\r\n.rt-palette2__col.is-open { flex-grow: var(--grow); }\r\n.rt-palette2__col:not(.is-open) { cursor: pointer; }\r\n\r\n.rt-palette2 .rt-palette2__label {\r\n  position: absolute;\r\n  z-index: 2;\r\n  top: 23px; left: 35px;\r\n  width: auto;\r\n  min-height: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: none;\r\n  color: var(--ink);\r\n  font: inherit;\r\n  text-align: left;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  line-height: normal;\r\n  box-shadow: none;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  cursor: pointer;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n.rt-palette2 .rt-palette2__label:hover,\r\n.rt-palette2 .rt-palette2__label:focus { background: none; }\r\n.rt-palette2 .rt-palette2__label:focus-visible {\r\n  outline: 2px solid var(--ink);\r\n  outline-offset: 4px;\r\n}\r\n\r\n.rt-palette2__chip {\r\n  flex: none;\r\n  width: 9px; height: 9px;\r\n  padding: 0;\r\n  border-radius: 50%;\r\n  background: var(--biotech);\r\n  transition: background .35s ease;\r\n}\r\n.rt-palette2__col.is-open .rt-palette2__chip { background: var(--accent); }\r\n\r\n.rt-palette2__name {\r\n  color: var(--accent);\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  letter-spacing: .02em;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* titoletto sulla riga della label, a destra *\/\r\n.rt-palette2__partner {\r\n  position: absolute;\r\n  z-index: 2;\r\n  top: 23px;\r\n  right: 35px;\r\n  color: var(--accent);\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  letter-spacing: .02em;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n  opacity: 0;\r\n  transition: opacity var(--dur) var(--ease);\r\n}\r\n.rt-palette2__col.is-open .rt-palette2__partner { opacity: 1; }\r\n\r\n.rt-palette2__content {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 51cqw;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  transition: opacity var(--dur) var(--ease);\r\n}\r\n@supports not (width: 1cqw) {\r\n  .rt-palette2__content { width: 51vw; }\r\n}\r\n.rt-palette2__col.is-open .rt-palette2__content {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.rt-palette2__media {\r\n  --rt-media-size: clamp(140px, 22cqw, 240px);\r\n  position: relative;\r\n  flex: none;\r\n  min-height: 0;\r\n  width: var(--rt-media-size);\r\n  height: var(--rt-media-size);\r\n  margin: 35px auto 0;\r\n  padding: 0;\r\n  background: none;\r\n  border: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.rt-palette2__media img,\r\n.rt-palette2__media video,\r\n.rt-palette2__media svg {\r\n  width: auto;\r\n  height: auto;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  object-fit: contain;\r\n}\r\n@media (min-width: 1300px){\r\n.rt-palette2__media {\r\nposition: relative!important;\r\ntop:30px;\r\n}\r\n}\r\n\/*\r\n.rt-palette2 .rey-video-mask {\r\n  position: relative;\r\n  display: block;\r\n  height: 100%;\r\n  width: auto;\r\n  aspect-ratio: 1 \/ 1;\r\n  max-width: 100%;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n  line-height: 0;\r\n}\r\n.rt-palette2 .rey-video-mask video {\r\n  width: 100%;\r\n  height: 100%;\r\n  max-width: none;\r\n  max-height: none;\r\n  object-fit: cover;\r\n}\r\n\r\n.rt-palette2 .rey-video-mask::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  pointer-events: none;\r\n  background-image:\r\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\r\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\r\n  background-size: 90px 90px;\r\n  -webkit-mask: radial-gradient(circle at center,\r\n      transparent 30%,\r\n      #000 50%,\r\n      #000 62%,\r\n      transparent 85%);\r\n          mask: radial-gradient(circle at center,\r\n      transparent 30%,\r\n      #000 50%,\r\n      #000 62%,\r\n      transparent 85%);\r\n}\r\n\r\n.rt-palette2 .rey-video-mask::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 3;\r\n  pointer-events: none;\r\n  background: radial-gradient(circle at center,\r\n      rgba(241, 244, 240, 0) 50%,\r\n      rgba(241, 244, 240, 1) 72%,\r\n      rgba(241, 244, 240, 1) 100%);\r\n}*\/\r\n\r\n.rt-palette2 .rt-markers2 {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 3;\r\n  pointer-events: none;\r\n}\r\n.rt-palette2 .rt-marker2 {\r\n  position: absolute;\r\n  left: var(--x);\r\n  top: var(--y);\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 4px;\r\n  border: 1px solid rgba(255, 255, 255, .35);\r\n  background-color: rgba(25, 43, 53, .05);\r\n  -webkit-backdrop-filter: blur(4px);\r\n  backdrop-filter: blur(4px);\r\n  color: var(--ink);\r\n}\r\n\r\n.rt-palette2 .rt-marker2::before {\r\n  content: \"\";\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 100%;\r\n  background-color: currentColor;\r\n}\r\n\r\n.rt-palette2__cursor {\r\n  position: fixed;\r\n  top: 0; left: 0;\r\n  z-index: 9990;\r\n  pointer-events: none;\r\n  will-change: transform;\r\n}\r\n\r\n.rt-palette2__cursor-box {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n  padding: 15px 15px;\r\n  border-radius: 2px;\r\n  border: 1px solid rgba(255, 255, 255, .5);\r\n  background: rgba(241, 244, 240, .6);\r\n  -webkit-backdrop-filter: blur(6px);\r\n  backdrop-filter: blur(6px);\r\n  box-shadow: 0 4px 18px rgba(25, 43, 53, .12);\r\n  color: #3E6F62;\r\n  font-family: \"Aptos\", sans-serif;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  letter-spacing: .02em;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n  opacity: 0;\r\n  transform: translate(-50%, 26px) scale(.85);\r\n  transition: opacity .3s ease, transform .3s ease;\r\n}\r\n.rt-palette2__cursor.is-visible .rt-palette2__cursor-box {\r\n  opacity: 1;\r\n  transform: translate(-50%, 26px) scale(1);\r\n}\r\n.rt-palette2__cursor-box svg {\r\n  width: 18px;\r\n  height: 18px;\r\n  flex: none;\r\n  color: #192B35;\r\n}\r\n@media (hover: none) {\r\n  .rt-palette2__cursor { display: none; }\r\n}\r\n\r\n.rt-palette2__caption {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 20px;\r\n  padding: 0 35px 28px;\r\n  color: var(--ink);\r\n}\r\n.rt-palette2__caption h3 {\r\n  flex: none;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  color: var(--petrol);\r\n  font-family: var(--rt-palette2-font-light, inherit);\r\n  font-size: 32px;\r\n  font-style: normal;\r\n  font-weight: 300;\r\n  text-transform: none;\r\nletter-spacing:-0.576px;\r\nline-height:41.6px;\r\n}\r\n.rt-palette2__caption p {\r\n  flex: none;\r\n  width: 100%;\r\n  min-width: 0;\r\n  max-width: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  color: inherit;\r\n  font-size: 18px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 1.4;\r\n  opacity: 0;\r\n  transform: translateY(12px);\r\n  transition: opacity .55s var(--ease), transform .55s var(--ease);\r\n  transition-delay: .18s;\r\n}\r\n\r\n.rt-palette2__caption b {\r\n  color: var(--line);\r\n  position: relative;\r\n  bottom: 5px;\r\n}\r\n\r\n.rt-palette2__col.is-open .rt-palette2__caption p {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .rt-palette2 {\r\n    flex-direction: column;\r\n    height: auto;\r\n  }\r\n  .rt-palette2__col {\r\n    flex: none;\r\n    height: 60px;\r\n    transition: height var(--dur) var(--ease);\r\n  }\r\n  .rt-palette2__col.is-open { height: min(72vh, 540px); }\r\n  .rt-palette2__content { width: 100%; }\r\n  .rt-palette2__media {\r\n    --rt-media-size: clamp(120px, 34vw, 200px);\r\n    margin: 58px auto 0;\r\n  }\r\n\r\n  .rt-palette2__caption {\r\n    gap: 10px;\r\n    padding-left: 14px;\r\n    padding-right: 14px;\r\n  }\r\n  .rt-palette2__caption h3 { font-size: 40px; }\r\n\r\n  .rt-palette2 .rt-palette2__label { left: 14px; gap: 12px; }\r\n  .rt-palette2__partner { right: 14px; }\r\n\r\n  .rt-palette2__cursor { display: none; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .rt-palette2__col,\r\n  .rt-palette2__content,\r\n  .rt-palette2__caption p { transition-duration: .001s; }\r\n  .rt-palette2__caption p { transform: none; }\r\n}\r\n\r\n<\/style><script id=\"reytera-palette2-js\">(function () {\r\n  'use strict';\r\n\r\n  var MOBILE_QUERY = '(max-width: 1024px)';\r\n\r\n  function setOpen(column, open) {\r\n    column.classList.toggle('is-open', open);\r\n\r\n    var label = column.querySelector('.rt-palette2__label');\r\n    if (label) {\r\n      label.setAttribute('aria-expanded', String(open));\r\n    }\r\n\r\n    var content = column.querySelector('.rt-palette2__content');\r\n    if (content) {\r\n      content.setAttribute('aria-hidden', String(!open));\r\n    }\r\n  }\r\n\r\n  function initCursorHint(section) {\r\n    if (section.getAttribute('data-rt-cursor') === 'no') {\r\n      return;\r\n    }\r\n    if (!window.matchMedia) {\r\n      return;\r\n    }\r\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n      return;\r\n    }\r\n    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) {\r\n      return;\r\n    }\r\n\r\n    function stackedLayout() {\r\n      return window.matchMedia(MOBILE_QUERY).matches;\r\n    }\r\n\r\n    var hintText = section.getAttribute('data-rt-cursor-text') || 'Esplora le card';\r\n\r\n    var follower = document.createElement('div');\r\n    follower.className = 'rt-palette2__cursor';\r\n    follower.setAttribute('aria-hidden', 'true');\r\n    follower.innerHTML =\r\n      '<span class=\"rt-palette2__cursor-box\">' +\r\n        '<svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M11 6H1m4-4L1 6l4 4\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg>' +\r\n        '<span class=\"rt-palette2__cursor-text\"><\/span>' +\r\n        '<svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h10M7 2l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg>' +\r\n      '<\/span>';\r\n    follower.querySelector('.rt-palette2__cursor-text').textContent = hintText;\r\n    document.body.appendChild(follower);\r\n\r\n    var LAMBDA = 5;\r\n    var targetX = 0;\r\n    var targetY = 0;\r\n    var curX = 0;\r\n    var curY = 0;\r\n    var lastT = 0;\r\n    var rafId = null;\r\n\r\n    function frame(now) {\r\n      var dt = lastT ? Math.min((now - lastT) \/ 1000, 0.05) : 0.016;\r\n      lastT = now;\r\n      var k = 1 - Math.exp(-LAMBDA * dt);\r\n      curX += (targetX - curX) * k;\r\n      curY += (targetY - curY) * k;\r\n      follower.style.transform = 'translate3d(' + curX.toFixed(2) + 'px,' + curY.toFixed(2) + 'px,0)';\r\n      rafId = requestAnimationFrame(frame);\r\n    }\r\n\r\n    function startLoop() {\r\n      if (!rafId) {\r\n        lastT = 0;\r\n        rafId = requestAnimationFrame(frame);\r\n      }\r\n    }\r\n\r\n    function stopLoop() {\r\n      if (rafId) {\r\n        cancelAnimationFrame(rafId);\r\n        rafId = null;\r\n      }\r\n    }\r\n\r\n    section.addEventListener('pointerenter', function (event) {\r\n      if (event.pointerType !== 'mouse' || stackedLayout()) {\r\n        return;\r\n      }\r\n\r\n      targetX = curX = event.clientX;\r\n      targetY = curY = event.clientY;\r\n      follower.style.transform = 'translate3d(' + curX + 'px,' + curY + 'px,0)';\r\n      follower.classList.add('is-visible');\r\n      startLoop();\r\n    });\r\n\r\n    section.addEventListener('pointermove', function (event) {\r\n      if (event.pointerType !== 'mouse') {\r\n        return;\r\n      }\r\n      if (stackedLayout()) {\r\n        follower.classList.remove('is-visible');\r\n        return;\r\n      }\r\n      targetX = event.clientX;\r\n      targetY = event.clientY;\r\n\r\n      var overInteractive = event.target.closest &&\r\n        event.target.closest('.rt-palette2__label');\r\n      follower.classList.toggle('is-visible', !overInteractive);\r\n    });\r\n\r\n    section.addEventListener('pointerleave', function (event) {\r\n      if (event.pointerType !== 'mouse') {\r\n        return;\r\n      }\r\n      follower.classList.remove('is-visible');\r\n      stopLoop();\r\n    });\r\n  }\r\n\r\n  function initPalette(section) {\r\n    if (section.dataset.rtPalette2Init) {\r\n      return;\r\n    }\r\n    section.dataset.rtPalette2Init = '1';\r\n\r\n    var columns = Array.prototype.slice.call(\r\n      section.querySelectorAll('.rt-palette2__col')\r\n    );\r\n\r\n    function openColumn(column) {\r\n      if (column.classList.contains('is-open')) {\r\n        return;\r\n      }\r\n      columns.forEach(function (other) {\r\n        setOpen(other, other === column);\r\n      });\r\n    }\r\n\r\n    function hoverAllowed() {\r\n      return !!window.matchMedia &&\r\n        window.matchMedia('(hover: hover) and (pointer: fine)').matches &&\r\n        !window.matchMedia(MOBILE_QUERY).matches;\r\n    }\r\n\r\n    columns.forEach(function (column) {\r\n      column.addEventListener('pointerenter', function (event) {\r\n        if (!hoverAllowed()) {\r\n          return;\r\n        }\r\n\r\n        if (event.pointerType !== 'touch') {\r\n          openColumn(column);\r\n        }\r\n      });\r\n\r\n      column.addEventListener('click', function () {\r\n        openColumn(column);\r\n      });\r\n    });\r\n\r\n    initCursorHint(section);\r\n  }\r\n\r\n  function boot() {\r\n    var sections = document.querySelectorAll('[data-rt-palette2]');\r\n    Array.prototype.forEach.call(sections, initPalette);\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', boot);\r\n  } else {\r\n    boot();\r\n  }\r\n})();<\/script><section class=\"rt-palette2\" data-rt-palette2 aria-label=\"Palette\"\r\n\tdata-rt-cursor=\"yes\"\r\n\tdata-rt-cursor-text=\"Esplora\">\r\n\t\t<article class=\"rt-palette2__col is-open\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"true\"\r\n\t\t\taria-controls=\"rt-palette2-1-1\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Sviluppo su specifica e approccio di partnership<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-1-1\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"rt2g1-1\" cx=\"38%\" cy=\"30%\" r=\"80%\"><stop offset=\"0%\" stop-color=\"#C79B85\"\/><stop offset=\"55%\" stop-color=\"#A47864\"\/><stop offset=\"100%\" stop-color=\"#7C5240\"\/><\/radialGradient><\/defs><ellipse cx=\"150\" cy=\"232\" rx=\"98\" ry=\"14\" fill=\"#A47864\" opacity=\".22\"\/><path fill=\"url(#rt2g1-1)\" d=\"M150 22c46 0 96 28 104 74 8 44-18 96-58 112-42 17-102 6-126-32-24-39-8-98 22-126 18-17 36-28 58-28z\"\/><path fill=\"#fff\" opacity=\".14\" d=\"M108 60c20-16 52-22 74-12-30-2-58 10-74 12z\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Sviluppo su specifica e approccio di partnership<\/h3>\r\n\t\t\t\t<p>Una base solida e senza tempo. Tonalit\u00e0 terrose che comunicano affidabilit\u00e0, durano oltre le mode e danno peso a ogni scelta di design.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t\t<article class=\"rt-palette2__col\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"false\"\r\n\t\t\taria-controls=\"rt-palette2-1-2\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Riservatezza del brief e perimetro del progetto<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-1-2\" aria-hidden=\"true\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"rt2g2-1\" cx=\"35%\" cy=\"28%\" r=\"75%\"><stop offset=\"0%\" stop-color=\"#D9B49E\"\/><stop offset=\"60%\" stop-color=\"#B08468\"\/><stop offset=\"100%\" stop-color=\"#83573F\"\/><\/radialGradient><\/defs><ellipse cx=\"150\" cy=\"234\" rx=\"92\" ry=\"13\" fill=\"#A47864\" opacity=\".22\"\/><circle cx=\"150\" cy=\"122\" r=\"86\" fill=\"url(#rt2g2-1)\"\/><ellipse cx=\"150\" cy=\"150\" rx=\"122\" ry=\"26\" fill=\"none\" stroke=\"#FF5500\" stroke-width=\"3\" opacity=\".85\" transform=\"rotate(-14 150 150)\"\/><circle cx=\"116\" cy=\"86\" r=\"18\" fill=\"#fff\" opacity=\".16\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Riservatezza del brief e perimetro del progetto<\/h3>\r\n\t\t\t\t<p>Texture organiche e materia viva. Il calore della terra porta l'esterno dentro l'esperienza digitale, con superfici che sembrano vere.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t\t<article class=\"rt-palette2__col\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"false\"\r\n\t\t\taria-controls=\"rt-palette2-1-3\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Protocolli dedicati e gestione del know-how<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-1-3\" aria-hidden=\"true\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><linearGradient id=\"rt2g3-1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0%\" stop-color=\"#CDA28A\"\/><stop offset=\"100%\" stop-color=\"#8A5F47\"\/><\/linearGradient><\/defs><ellipse cx=\"150\" cy=\"236\" rx=\"104\" ry=\"13\" fill=\"#A47864\" opacity=\".22\"\/><path fill=\"url(#rt2g3-1)\" d=\"M42 190c0-58 26-128 108-128 66 0 108 44 108 96 0 14-8 26-24 26-30 0-22-78-84-78-56 0-56 60-76 84-14 17-32 14-32 0z\"\/><path fill=\"#fff\" opacity=\".12\" d=\"M84 96c22-24 56-36 88-30-40 2-70 16-88 30z\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Protocolli dedicati e gestione del know-how<\/h3>\r\n\t\t\t\t<p>Diretto e senza filtri. Sfumature calde e familiari che rendono ogni interazione genuina, vicina, immediatamente riconoscibile.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t\t<article class=\"rt-palette2__col\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"false\"\r\n\t\t\taria-controls=\"rt-palette2-1-4\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Possibilit\u00e0 di percorsi di esclusivit\u00e0 o co-sviluppo<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-1-4\" aria-hidden=\"true\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"rt2g4-1\" cx=\"40%\" cy=\"32%\" r=\"78%\"><stop offset=\"0%\" stop-color=\"#CBB79C\"\/><stop offset=\"58%\" stop-color=\"#9C8464\"\/><stop offset=\"100%\" stop-color=\"#6E5A3C\"\/><\/radialGradient><\/defs><ellipse cx=\"150\" cy=\"234\" rx=\"96\" ry=\"13\" fill=\"#A47864\" opacity=\".22\"\/><rect x=\"70\" y=\"52\" width=\"160\" height=\"140\" rx=\"26\" fill=\"url(#rt2g4-1)\"\/><path fill=\"#fff\" opacity=\".13\" d=\"M96 78c22-14 58-18 82-8-32-2-64 6-82 8z\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Possibilit\u00e0 di percorsi di esclusivit\u00e0 o co-sviluppo<\/h3>\r\n\t\t\t\t<p>Testo segnaposto della quarta colonna. Sostituiscilo con il tuo contenuto.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t<\/section>\r\n\t\t<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/sviluppo-su-specifica-1-3.jpg\" alt=\"\"><\/p>\n<h3>Sviluppo su specifica e approccio di partnership<\/h3>\n<p>\/ 01 <span> Sviluppo <\/span> <\/p>\n<div>Non proponiamo soluzioni predefinite. Ogni progetto nasce dalle esigenze del cliente e si sviluppa attraverso un percorso botanico, tecnico e analitico dedicato.<\/p>\n<div class=\"rt-markers-box\">\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:45%; --y:-250px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:30%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:70%; --y:-150px;\" aria-hidden=\"true\"><\/span><\/p>\n<p>     <span class=\"rt-marker uk-hidden@s\" style=\"--x:65%; --y:-280px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:10%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:70%; --y:-180px;\" aria-hidden=\"true\"><\/span>\n  <\/div>\n<\/div>\n<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/Riservatezza.jpg\" alt=\"\"><\/p>\n<h3>Riservatezza del brief e perimetro del progetto<\/h3>\n<p>\/ 02 <span>Riservatezza<\/span><\/p>\n<div>Informazioni, obiettivi, dati e attivit\u00e0 di sviluppo restano all\u2019interno del perimetro della singola collaborazione e vengono gestiti secondo modalit\u00e0 concordate con il cliente.<\/p>\n<div class=\"rt-markers-box\">\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:45%; --y:-240px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:28%; --y:-130px;\" aria-hidden=\"true\"><\/span><br \/>\n     <span class=\"rt-marker uk-visible@s\" style=\"--x:65%; --y:-130px;\" aria-hidden=\"true\"><\/span><br \/>\n       <span class=\"rt-marker uk-hidden@s\" style=\"--x:70%; --y:-150px;\" aria-hidden=\"true\"><\/span><br \/>\n         <span class=\"rt-marker uk-hidden@s\" style=\"--x:10%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:48%; --y:-270px;\" aria-hidden=\"true\"><\/span>\n  <\/div>\n<\/div>\n<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/Protocolli-img.jpg\" alt=\"\"><\/p>\n<h3>Protocolli dedicati e gestione del know-how<\/h3>\n<p>\/ 03 <span>Protocolli<\/span><\/p>\n<div>Processi e protocolli vengono definiti per il singolo progetto. Le modalit\u00e0 di utilizzo, tutela e condivisione del know-how sviluppato vengono concordate con il cliente.<\/p>\n<div class=\"rt-markers-box\">\n  <span class=\"rt-marker uk-visible@s\" style=\"--x:45%; --y:-250px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:30%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:70%; --y:-150px;\" aria-hidden=\"true\"><\/span><\/p>\n<p>     <span class=\"rt-marker uk-hidden@s\" style=\"--x:35%; --y:-280px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:10%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:70%; --y:-180px;\" aria-hidden=\"true\"><\/span>\n  <\/div>\n<\/div>\n<\/div>\n<div>\n<p>        <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/09\/co-sviluppo.jpg\" alt=\"\"><\/p>\n<h3>Possibilit\u00e0 di percorsi di esclusivit\u00e0 o co-sviluppo<\/h3>\n<p>\/ 04 <span>co-sviluppo<\/span><\/p>\n<div>Quando il progetto lo richiede, possono essere definite formule di esclusivit\u00e0 o co- sviluppo, con ambito, durata e condizioni stabiliti caso per caso.<\/p>\n<div class=\"rt-markers-box\">\n     <span class=\"rt-marker uk-visible@s\" style=\"--x:65%; --y:-250px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:30%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-visible@s\" style=\"--x:58%; --y:-130px;\" aria-hidden=\"true\"><\/span><\/p>\n<p>     <span class=\"rt-marker uk-hidden@s\" style=\"--x:65%; --y:-280px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:10%; --y:-180px;\" aria-hidden=\"true\"><\/span><br \/>\n    <span class=\"rt-marker uk-hidden@s\" style=\"--x:70%; --y:-180px;\" aria-hidden=\"true\"><\/span>\n  <\/div>\n<\/div>\n<\/div>\n<div>[ 08. ]<\/div>\n<h3>Se hai una sfida sulla materia prima?<br \/>\n<br class=\"uk-visible@m\">Costruiamo insieme la risposta.<\/h3>\n<p><img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/reytera-asset-2-2-1.png\" alt=\"\"><\/p>\n<div>\n<div class=\"divider\"><\/div>\n<\/div>\n<div><span class=\"label-dot \">Parliamone<\/span><\/div>\n<div>Variabilit\u00e0, continuit\u00e0, performance o sviluppo di un nuovo ingrediente: condividi con noi il<br \/>\ntuo obiettivo. Valuteremo come tradurlo in un percorso botanico ed estrattivo sviluppato su<br \/>\nspecifica.<\/div>\n<div>\n<p>    <a class=\"rcta rcta--primary rcta--green rcta--pill rcta--sm\" href=\"mailto:info@reytera.it\" data-rcta><br \/>\n  <span class=\"rcta__text\"><span class=\"rcta__label\">Scrivici per approfondire una partnership<\/span><\/span><br \/>\n<\/a>\n<\/div>\n<div>\n<p>    <a class=\"rcta rcta--primary rcta--green rcta--pill rcta--sm\" href=\"mailto:info@reytera.it\" data-rcta><br \/>\n  <span class=\"rcta__text\"><span class=\"rcta__label\">Proponi una partnership<\/span><\/span><br \/>\n<\/a>\n<\/div>\n<div>\n<nav class=\"cc-navbar\" aria-label=\"Navigazione sezioni\">\n<div class=\"cc-navbar__control\">\n<div class=\"cc-navbar__thumb\"><\/div>\n<p>    <a class=\"cc-navbar__item\" href=\"#piattaforma\" data-cc-link>Piattaforma<\/a><br \/>\n    <a class=\"cc-navbar__item\" href=\"#output\"      data-cc-link>Output<\/a><br \/>\n    <a class=\"cc-navbar__item\" href=\"#tecnologia\"  data-cc-link>Tecnologia<\/a><br \/>\n    <a class=\"cc-navbar__item\" href=\"#metodo\"      data-cc-link>Metodo<\/a><br \/>\n    <a class=\"cc-navbar__item\" href=\"#partnership\" data-cc-link>Partnership<\/a>\n  <\/div>\n<\/nav>\n<style>\n.cc-navbar {\n  position: fixed;\n  bottom: 14px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 999;\n  display: flex;\n  justify-content: center;\n  font-family: Aptos, Arial, sans-serif;\n}\n.cc-navbar__control {\n  position: relative;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr;\n  align-items: center;\n  padding: 5px;\n    gap:5px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.52);\n  box-shadow:\n    inset 0 0 0 1px rgba(15, 23, 42, 0.05),\n    0 2px 8px rgba(15, 23, 42, 0.08);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n.cc-navbar__thumb {\n  position: absolute;\n  top: 5px;\n  left: 5px;\n  height: calc(100% - 10px);\n  border-radius: 999px;\n  background: #192B35;\n  box-shadow:\n    0 1px 2px rgba(15, 23, 42, 0.2),\n    0 8px 20px rgba(15, 23, 42, 0.16);\n  transition:\n    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),\n    width 420ms cubic-bezier(0.22, 1, 0.36, 1),\n    opacity 260ms ease;\n  will-change: transform, width;\n  pointer-events: none;\n  opacity: 0;\n}\n.cc-navbar__thumb.is-visible {\n  opacity: 1;\n}\n.cc-navbar__item {\n  position: relative;\n    text-transform: uppercase;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  padding: 0 20px;\n  border-radius: 999px;\n  color: var(--petrol);\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: color 260ms ease, background-color 260ms ease;\n}\n.cc-navbar__item:hover {\n  background-color: #DCE8E2;\n \/* color: #111827;*\/\n}\n.cc-navbar__item.is-current {\n  color: #ffffff;\n}\n.cc-navbar__item.is-current:hover {\n  background-color: transparent;\n  color: #ffffff;\n}\n@media (prefers-reduced-motion: reduce) {\n  .cc-navbar__thumb,\n  .cc-navbar__item {\n    transition: none;\n  }\n}\n\/*MOB*\/\n        @media screen and (max-width: 576px) {\n.cc-navbar__item {\nfont-size: 11px;\n      height: 32px;\n     padding: 0 7px;\n}\n        .cc-navbar {\n  position: fixed;\n  bottom: 10px;\n        }\n            .cc-navbar__control {\n  position: relative;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 1fr;\n  align-items: center;\n  padding: 5px;\n    gap:2px;\n            }\n    }\n<\/style>\n<p><script>\n(function () {\n  var navbar = document.querySelector('.cc-navbar');\n  if (!navbar) return;<\/p>\n<p>  var control = navbar.querySelector('.cc-navbar__control');\n  var thumb   = navbar.querySelector('.cc-navbar__thumb');\n  var items   = Array.prototype.slice.call(navbar.querySelectorAll('.cc-navbar__item'));\n  var current = null;<\/p>\n<p>  \/\/ Sposta il thumb sotto un item specifico\n  function moveThumbTo(item) {\n    if (!item) return;\n    var cRect = control.getBoundingClientRect();\n    var iRect = item.getBoundingClientRect();\n    thumb.style.width = iRect.width + 'px';\n    thumb.style.transform = 'translateX(' + (iRect.left - cRect.left - 5) + 'px)';\n  }<\/p>\n<p>  \/\/ Attiva un item (thumb visibile + testo bianco) oppure lo nasconde se item = null\n  function setCurrent(item) {\n    current = item;\n    items.forEach(function (el) { el.classList.remove('is-current'); });\n    if (item) {\n      item.classList.add('is-current');\n      moveThumbTo(item);\n      thumb.classList.add('is-visible');\n    } else {\n      thumb.classList.remove('is-visible');\n    }\n  }<\/p>\n<p>  \/\/ Collega ogni item alla sua section\n  var tracked = items\n    .map(function (item) {\n      var id = item.getAttribute('href');\n      var section = id && id.charAt(0) === '#' ? document.querySelector(id) : null;\n      return section ? { item: item, section: section } : null;\n    })\n    .filter(Boolean);<\/p>\n<p>  \/\/ Tiene traccia delle section attualmente visibili nella banda centrale\n  var visible = new Set();<\/p>\n<p>  if ('IntersectionObserver' in window && tracked.length) {\n    var observer = new IntersectionObserver(function (entries) {\n      entries.forEach(function (entry) {\n        var found = tracked.filter(function (t) { return t.section === entry.target; })[0];\n        if (!found) return;\n        if (entry.isIntersecting) visible.add(found);\n        else visible.delete(found);\n      });<\/p>\n<p>      if (visible.size) {\n        \/\/ Section visibile pi\u00f9 in alto nel documento\n        var top = Array.from(visible).sort(function (a, b) {\n          return a.section.getBoundingClientRect().top - b.section.getBoundingClientRect().top;\n        })[0];\n        setCurrent(top.item);\n      } else {\n        setCurrent(null);\n      }\n    }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });<\/p>\n<p>    tracked.forEach(function (t) { observer.observe(t.section); });\n  }<\/p>\n<p>  window.addEventListener('resize', function () {\n    if (current) moveThumbTo(current);\n  });\n})();\n<\/script>\n<\/div>\n<div>\n<style>\n  .ry-cards-pager {\n    position: fixed;\n    top: 0;\n    left: var(--ry-pager-left, 60px);\n    z-index: 90;\n    display: flex;\n    align-items: center;\n    height: 100vh;\n    pointer-events: none;      \/* non intercetta i click sulla pagina *\/\n    opacity: 0;\n    transition: opacity .3s ease;\n  }\n  .ry-cards-pager.is-visible { opacity: 1; }<\/p>\n<p>  .ry-card-pager {\n    position: relative;\n    box-sizing: content-box;\n    width: 8px;\n    height: 8px;               \/* chiusa: si vede solo la palina *\/\n    \/* il testo ruotato e piu spesso di 8px: il padding orizzontale\n       (compensato dal margine negativo) allarga la zona di ritaglio\n       senza spostare nulla, cosi le lettere non vengono rasate *\/\n    padding-left: 10px;\n    padding-right: 10px;\n    margin-left: -10px;\n    margin-bottom: 20px;\n    overflow: hidden;\n    transition: height .8s ease;\n  }\n  .ry-card-pager:last-of-type { margin-bottom: 0; }\n  .ry-card-pager.active { height: var(--ry-pager-open, 80px); }<\/p>\n<p>  .ry-card-hider {\n    position: absolute;\n    bottom: 0;\n    display: flex;\n    align-items: flex-end;\n    height: var(--ry-pager-open, 80px);\n  }\n  .ry-pager-bullet {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--ry-pager-color, #3E6F62);\n    opacity: .2;\n    transition: opacity .4s ease;\n  }\n  .ry-card-pager.active .ry-pager-bullet { opacity: 1; }<\/p>\n<p>  .ry-pager-label {\n    position: absolute;\n    top: var(--ry-label-top, 33px);\n    left: var(--ry-label-left, -36px);\n    width: var(--ry-label-width, 80px);\n    font-family: Aptos, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 14px;\n    line-height: 16px;\n    font-weight: 700;\n    letter-spacing: -.02em;\n    text-transform: uppercase;\n    text-align: left;\n    color: var(--ry-pager-color, #3E6F62);\n    transform: rotate(-90deg);\n    opacity: 0;\n    transition: opacity 1.8s ease;\n    white-space: nowrap;\n  }\n  .ry-card-pager.active .ry-pager-label { opacity: 1; }<\/p>\n<p>  @media (max-width: 1023px) {\n    .ry-cards-pager { display: none; }\n  }\n<\/style>\n<p><script>\n(function () {\n  \"use strict\";<\/p>\n<p>  \/* ===== LE TUE CARD: nome nel builder e titoletto del pager ===== *\/\n  var CARDS = [\n    { id: \"card-1\", label: \"Seme\" },\n    { id: \"card-2\", label: \"Coltivazione\" },\n    { id: \"card-3\", label: \"Fresco\" },\n    { id: \"card-4\", label: \"Essiccazione\" },\n    { id: \"card-5\", label: \"Estrazione\" }\n  ];<\/p>\n<p>  var OPZIONI = {\n    pagerLeft: \"60px\",       \/* distanza del pager dal bordo sinistro *\/\n    colore: \"#3E6F62\",       \/* colore di paline e titoletti *\/\n    soglia: 0.85,            \/* quando si accende la card nuova:\n                                0.85 = appena entra dal basso,\n                                0.5 = a meta schermo, 0.2 = in alto *\/\n    gestisciVideo: true      \/* pausa i video delle card coperte *\/\n  };\n  \/* ================ da qui in giu non serve toccare ================ *\/<\/p>\n<p>  if (window.ryCardPagerAttivo) { return; }   \/* niente doppioni *\/\n  window.ryCardPagerAttivo = true;<\/p>\n<p>  \/* Il nome della card puo essere un ID oppure una classe *\/\n  function findCard(name) {\n    var byId = document.getElementById(name);\n    if (byId) { return byId; }\n    return document.querySelector(\".\" + name);\n  }<\/p>\n<p>  function init() {\n    var cards = [];\n    var labels = [];\n    CARDS.forEach(function (entry) {\n      var el = findCard(entry.id);\n      if (el) {\n        cards.push(el);\n        labels.push(entry.label);\n      } else {\n        console.warn('[card-pager] card non trovata: nessun elemento con id o classe \"' + entry.id + '\"');\n      }\n    });\n    if (cards.length === 0) { return; }<\/p>\n<p>    \/* Lo sticky lo fa il builder: cerchiamo, per ogni card, l antenato\n       con lo Sticky di UIkit. E lui a dirci quando la card si aggancia\n       (classe uk-active). Nessuna modifica agli elementi. *\/\n    function trovaSticky(card) {\n      var nodo = card;\n      while (nodo) {\n        if (nodo === document.body) { return null; }\n        if (nodo.hasAttribute) {\n          if (nodo.hasAttribute(\"uk-sticky\")) { return nodo; }\n          if (nodo.hasAttribute(\"data-uk-sticky\")) { return nodo; }\n        }\n        nodo = nodo.parentElement;\n      }\n      return null;\n    }<\/p>\n<p>    var stickies = cards.map(trovaSticky);\n    var almenoUno = stickies.some(function (s) { return s !== null; });\n    if (!almenoUno) {\n      console.warn(\"[card-pager] nota: Sticky del builder non rilevato sulle colonne. Il pager funziona lo stesso, ma senza Sticky le card non si impilano.\");\n    }<\/p>\n<p>    console.log(\"[card-pager] attivo su \" + cards.length + \" card\");<\/p>\n<p>    \/* ---- Pager: l unica cosa che questo blocco aggiunge ---- *\/\n    var pager = document.createElement(\"div\");\n    pager.className = \"ry-cards-pager\";\n    pager.style.setProperty(\"--ry-pager-color\", OPZIONI.colore);\n    pager.style.setProperty(\"--ry-pager-left\", OPZIONI.pagerLeft);<\/p>\n<p>    \/* contenitore interno: dentro il flex del pager le paline vanno\n       in un blocco verticale, appese direttamente verrebbero\n       disposte in riga e schiacciate *\/\n    var pagerInner = document.createElement(\"div\");<\/p>\n<p>    labels.forEach(function (label, i) {\n      var item = document.createElement(\"div\");\n      item.className = \"ry-card-pager\";\n      item.dataset.id = String(i + 1);<\/p>\n<p>      var hider = document.createElement(\"div\");\n      hider.className = \"ry-card-hider\";<\/p>\n<p>      var labelEl = document.createElement(\"div\");\n      labelEl.className = \"ry-pager-label\";\n      labelEl.textContent = label;<\/p>\n<p>      var bullet = document.createElement(\"div\");\n      bullet.className = \"ry-pager-bullet\";<\/p>\n<p>      hider.appendChild(labelEl);\n      hider.appendChild(bullet);\n      item.appendChild(hider);\n      pagerInner.appendChild(item);\n    });\n    pager.appendChild(pagerInner);\n    document.body.appendChild(pager);<\/p>\n<p>    var pagerItems = Array.prototype.slice.call(pager.querySelectorAll(\".ry-card-pager\"));<\/p>\n<p>    \/* L apertura della palina segue la lunghezza del titoletto piu\n       lungo. Il testo ruotato e ancorato in basso: senza un cuscino\n       sopra, se il font finale rende il testo anche solo qualche px\n       piu largo della misura iniziale, la parte alta viene tagliata\n       dall overflow. Quindi: margine di misura largo, 6px d aria\n       sopra il testo, e rimisura a font e pagina caricati. *\/\n    function applyPagerMetrics() {\n      \/* misura su cloni fuori schermo appesi a body: il pager puo\n         essere display none (viewport stretto al load, CSS in\n         ritardo) e li offsetWidth darebbe 0 -> box troppo piccolo\n         -> testo ruotato tagliato in alto *\/\n      var contenitore = document.createElement(\"div\");\n      contenitore.style.position = \"absolute\";\n      contenitore.style.left = \"-9999px\";\n      contenitore.style.top = \"0\";\n      contenitore.style.visibility = \"hidden\";\n      document.body.appendChild(contenitore);\n      var larghezza = 0;\n      var mezzaRiga = 8;\n      pagerItems.forEach(function (item) {\n        var clone = item.querySelector(\".ry-pager-label\").cloneNode(true);\n        clone.style.position = \"static\";\n        clone.style.transform = \"none\";\n        clone.style.width = \"max-content\";\n        contenitore.appendChild(clone);\n        larghezza = Math.max(larghezza, clone.offsetWidth);\n        mezzaRiga = Math.max(mezzaRiga, Math.round(clone.offsetHeight \/ 2));\n      });\n      contenitore.remove();\n      if (larghezza === 0) { return; }   \/* niente misure valide: riprova dopo *\/\n      larghezza = Math.max(Math.ceil(larghezza) + 10, 80);\n      var cuscino = 6;\n      pager.style.setProperty(\"--ry-pager-open\", (larghezza + cuscino + 20) + \"px\");\n      pager.style.setProperty(\"--ry-label-width\", larghezza + \"px\");\n      pager.style.setProperty(\"--ry-label-top\", (cuscino + larghezza \/ 2 - mezzaRiga) + \"px\");\n      pager.style.setProperty(\"--ry-label-left\", (4 - larghezza \/ 2) + \"px\");\n    }\n    applyPagerMetrics();\n    if (document.fonts) {\n      if (document.fonts.ready) {\n        document.fonts.ready.then(function () { applyPagerMetrics(); });\n      }\n    }\n    \/* alcuni ottimizzatori WP caricano i CSS in ritardo: rimisura *\/\n    setTimeout(applyPagerMetrics, 1000);<\/p>\n<p>    \/* ---- Posizione verticale: agganciata alla fascia delle card ----\n       Sopra le card c e il titolo della sezione, anche lui sticky:\n       il pager non va centrato sul viewport ma sulla fascia dove le\n       card si bloccano. L offset lo leggiamo dall attributo uk-sticky\n       delle colonne (es. \"offset: 18% + 20vh\"), cosi se lo cambi nel\n       builder il pager si riallinea da solo. *\/\n    function offsetDaSticky() {\n      var trovato = null;\n      stickies.forEach(function (s) {\n        if (trovato !== null) { return; }\n        if (!s) { return; }\n        var attr = s.getAttribute(\"uk-sticky\");\n        if (!attr) { attr = s.getAttribute(\"data-uk-sticky\"); }\n        if (!attr) { return; }\n        var indice = attr.indexOf(\"offset:\");\n        if (indice === -1) { return; }\n        var resto = attr.slice(indice + 7);\n        var fine = resto.indexOf(\";\");\n        if (fine !== -1) { resto = resto.slice(0, fine); }\n        var somma = 0;\n        var valido = false;\n        resto.split(\"+\").forEach(function (parte) {\n          parte = parte.trim();\n          var numero = parseFloat(parte);\n          if (isNaN(numero)) { return; }\n          valido = true;\n          if (parte.indexOf(\"%\") !== -1) {\n            somma = somma + numero * window.innerHeight \/ 100;\n          } else if (parte.indexOf(\"vh\") !== -1) {\n            somma = somma + numero * window.innerHeight \/ 100;\n          } else {\n            somma = somma + numero;\n          }\n        });\n        if (valido) { trovato = Math.round(somma); }\n      });\n      return trovato;\n    }<\/p>\n<p>    function posizionaPager() {\n      var offset = offsetDaSticky();\n      if (offset === null) {\n        \/* nessuno sticky del builder: ripiego sul viewport intero *\/\n        pager.style.top = \"0px\";\n        pager.style.height = \"100vh\";\n        return;\n      }\n      var altezzaCard = 0;\n      cards.forEach(function (card) {\n        altezzaCard = Math.max(altezzaCard, card.offsetHeight);\n      });\n      var visibile = Math.min(altezzaCard, window.innerHeight - offset);\n      if (visibile > 0) {\n        pager.style.top = offset + \"px\";\n        pager.style.height = visibile + \"px\";\n      } else {\n        pager.style.top = \"0px\";\n        pager.style.height = \"100vh\";\n      }\n    }\n    posizionaPager();<\/p>\n<p>    \/* ---- Video: pausa quando la card e coperta ---- *\/\n    function safePlay(video) {\n      video.muted = true;\n      var attempt = video.play();\n      if (attempt) {\n        if (attempt.catch) { attempt.catch(function () {}); }\n      }\n    }\n    function aggiornaVideo(indiceAttivo) {\n      if (!OPZIONI.gestisciVideo) { return; }\n      cards.forEach(function (card, i) {\n        var videos = card.querySelectorAll(\"video\");\n        if (i === indiceAttivo) { videos.forEach(safePlay); return; }\n        if (i === indiceAttivo + 1) { videos.forEach(safePlay); return; }  \/* in arrivo *\/\n        if (i > indiceAttivo) { return; }\n        videos.forEach(function (v) { v.pause(); });   \/* coperta *\/\n      });\n    }<\/p>\n<p>    \/* ---- Stato: rilevazione geometrica, nessuna dipendenza ----\n       Titoletto attivo: l ultima card il cui bordo alto ha superato\n       la soglia (OPZIONI.soglia = 0.85: scatta appena la card nuova\n       entra dal basso).\n       Visibilita del pager: compare quando la PRIMA card raggiunge\n       il suo punto di aggancio (l offset dello Sticky del builder,\n       quindi sotto il titolo fisso) e scompare appena l ULTIMA card\n       si stacca e inizia a salire verso la sezione successiva. *\/\n    var ultimoAttivo = -1;\n    var ultimaVisibilita = false;<\/p>\n<p>    function stato() {\n      var soglia = window.innerHeight * OPZIONI.soglia;\n      var attivo = -1;\n      cards.forEach(function (card, i) {\n        var top = card.getBoundingClientRect().top;\n        if (soglia > top) { attivo = i; }\n      });\n      var ultima = cards[cards.length - 1].getBoundingClientRect();\n      if (window.innerHeight * 0.5 > ultima.bottom) { attivo = -1; }<\/p>\n<p>      var visibile = false;\n      if (attivo !== -1) {\n        var offset = offsetDaSticky();\n        if (offset === null) {\n          visibile = true;   \/* senza Sticky del builder: segue attivo *\/\n        } else {\n          var primoTop = cards[0].getBoundingClientRect().top;\n          \/* prima card arrivata all aggancio (40px di anticipo per\n             fondersi col fade)... *\/\n          if (offset + 40 > primoTop) {\n            \/* ...e ultima card non ancora staccata verso l alto *\/\n            if (ultima.top > offset - 10) { visibile = true; }\n          }\n        }\n      }<\/p>\n<p>      if (attivo === ultimoAttivo) {\n        if (visibile === ultimaVisibilita) { return; }\n      }\n      ultimoAttivo = attivo;\n      ultimaVisibilita = visibile;<\/p>\n<p>      pagerItems.forEach(function (item, i) {\n        item.classList.toggle(\"active\", i === attivo);\n      });\n      pager.classList.toggle(\"is-visible\", visibile);\n      if (visibile) { aggiornaVideo(attivo); }\n    }<\/p>\n<p>    \/* Lo scroll (throttled) guida tutto; resize e load ricalcolano\n       anche la posizione verticale del pager *\/\n    var attesa = false;\n    function suScroll() {\n      if (attesa) { return; }\n      attesa = true;\n      setTimeout(function () { attesa = false; stato(); }, 120);\n    }\n    function suResize() {\n      applyPagerMetrics();\n      posizionaPager();\n      suScroll();\n    }\n    function suLoad() {\n      applyPagerMetrics();\n      posizionaPager();\n      stato();\n    }\n    window.addEventListener(\"scroll\", suScroll, { passive: true });\n    window.addEventListener(\"resize\", suResize, { passive: true });\n    window.addEventListener(\"load\", suLoad);\n    stato();\n  }<\/p>\n<p>  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", init);\n  } else {\n    init();\n  }\n})();\n<\/script><\/p>\n<\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"\n\n<style>\\n  #rey-hero, #rey-hero *, #rey-hero *::before, #rey-hero *::after { box-sizing: border-box; }\\n\\n  #rey-hero {\\n    \/* ---- CONFIG VISIVA: i valori da ritoccare stanno qui ---- *\/\\n    --rey-bg:     #F1F4F0;\\n    --rey-ink:    #192B35;\\n    --rey-muted:  #7C8A90;\\n    --rey-line:   #3E6F62;\\n    --rey-grid:   rgba(220, 232, 226);\\n    --rey-cross:  rgba(25, 43, 53, 0.28);\\n    --rey-accent: #2F5D4F;\\n    --rey-mono: ui-monospace, \\\"SFMono-Regular\\\", \\\"Roboto Mono\\\", Menlo, Consolas, monospace;\\n\\n    position: relative;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    background: var(--rey-bg);\\n    color: var(--rey-ink);\\n    \/* Altezza totale = quanto scroll consuma l'animazione. 4 schermate.\\n       svh (non vh): deve usare la STESSA unit\u00e0 dello stage, altrimenti su\\n       telefono \u2014 dove vh e svh differiscono per l'altezza della barra URL \u2014\\n       la corsa del pin non corrisponde a un numero intero di schermate. *\/\\n    height: 400svh;\\n  }\\n\\n  \/* A fine pin lo stage (alto quanto il viewport ESTESO) sborda di ~80px\\n     oltre il fondo della sezione: il clip evita che copra la sezione dopo.\\n     Durante il pin non interferisce: un elemento fixed non viene clippato. *\/\\n  #rey-hero { overflow: hidden; overflow: clip; }\\n\\n  \/* Il palcoscenico: una schermata, inchiodata dal pin di ScrollTrigger.\\n     100vh e NON 100svh: su telefono 100vh corrisponde al viewport con la\\n     barra URL ritirata, quindi lo stage copre sempre tutto lo schermo.\\n     Con 100svh, appena la barra si ritirava restava una fascia vuota di\\n     ~80px sotto lo stage inchiodato (\\\"spazi sopra o sotto\\\"). I contenuti\\n     su mobile restano ancorati al viewport PICCOLO con le unit\u00e0 svh. *\/\\n  #rey-hero .rey-stage {\\n    position: relative;\\n    width: 100%;\\n    height: 100vh;\\n    overflow: hidden;\\n  }\\n\\n  \/* ---------- Griglia tecnica ---------- *\/\\n  #rey-hero .rey-grid {\\n    position: absolute; inset: 0; width: 100%; height: 100%;\\n    pointer-events: none; z-index: 0;\\n  }\\n  #rey-hero .rey-grid line { stroke: var(--rey-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }\\n  #rey-hero .rey-crosses { position: absolute; inset: 0; pointer-events: none; z-index: 0; }\\n  #rey-hero .rey-cross {\\n    position: absolute; width: 21px; height: 21px;\\n    margin: -10.5px 0 0 -10.5px;          \/* niente transform: GSAP resta libero *\/\\n    background: var(--rey-bg);\\n  }\\n  #rey-hero .rey-cross::before,\\n  #rey-hero .rey-cross::after {\\n    content: \\\"\\\"; position: absolute; background: var(--rey-cross);\\n  }\\n  #rey-hero .rey-cross::before { left: 50%; top: 4px; bottom: 4px; width: 1px; margin-left: -0.5px; }\\n  #rey-hero .rey-cross::after  { top: 50%; left: 4px; right: 4px; height: 1px; margin-top: -0.5px; }\\n\\n  \/* ---------- Canvas ----------\\n     Tre livelli separati perch\u00e9 ognuno ha un padrone diverso:\\n     wrap = centratura (CSS, mai animato) \u00b7 inner = animazione d'ingresso (GSAP)\\n     \u00b7 canvas = galleggiamento continuo (GSAP). Se si sovrappongono, i\\n     transform si sovrascrivono a vicenda. *\/\\n  #rey-hero .rey-canvas-wrap {\\n    position: absolute;\\n    left: 50%; top: 53%;\\n    \/* 500px standard sui desktop grandi; su schermi pi\u00f9 piccoli (sotto\\n       ~1316px di larghezza o ~834px di altezza) vincono i limiti in\\n       vw\/vh, altrimenti il sasso coprirebbe titolo e annotazioni. *\/\\n    width: min(500px, 38vw, 60vh);\\n    aspect-ratio: 1 \/ 1;\\n    \/* il wrap non \u00e8 mai animato da GSAP, quindi il transform \u00e8 libero:\\n       centratura esatta senza calcoli sui margini *\/\\n    transform: translate(-50%, -50%);\\n    z-index: 1;\\n  }\\n  .rey-loader {\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;   \/* centra tutto in orizzontale *\/\\n  justify-content: center;\\n  gap: 24px;             \/* spazio tra img, testo e barra *\/\\n}\\n\/* MASCHERA alpha \u2014 sfuma i FRAME a trasparente verso i bordi:\\n   la griglia dietro resta visibile, funziona su qualsiasi sfondo *\/\\n#rey-hero .rey-canvas {\\n  -webkit-mask-image: radial-gradient(circle at center,\\n      black 50%, transparent 72%);\\n  mask-image: radial-gradient(circle at center,\\n      black 50%, transparent 72%);\\n}\\n.rey-loader__img {\\n  width: 120px;\\n  height: 120px;\\n  object-fit: contain;   \/* evita deformazioni se l'immagine non \u00e8 quadrata *\/\\n  display: block;\\n}\\n  #rey-hero .rey-canvas-inner { position: absolute; inset: 0; }\\n  #rey-hero .rey-canvas { width: 100%; height: 100%; display: block; will-change: transform; }\\n\\n  \/* Marcatori: ancorati al riquadro del canvas, cos\u00ec seguono il sasso.\\n     I margini negativi valgono met\u00e0 del lato: centrano il marcatore sul\\n     punto di aggancio. Cambiando il lato vanno ricalcolati (31\/2 = 15.5). *\/\\n  #rey-hero .rey-dot {\\n    position: absolute;\\n    width: 31px; height: 31px;\\n    margin: -15.5px 0 0 -15.5px;\\n    border-radius: 4px;\\n    border: 1px solid rgba(255, 255, 255, .85);\\n    background-color: rgba(25, 43, 53, .06);\\n    -webkit-backdrop-filter: blur(4px);\\n    backdrop-filter: blur(4px);\\n    color: var(--rey-ink);\\n    display: grid; place-items: center;\\n    z-index: 3;\\n  }\\n  #rey-hero .rey-dot::after { content: \\\"\\\"; width: 9px; height: 9px; border-radius: 50%; background: var(--rey-line); }\\n\\n  \/* ---------- Collegamenti (disegnati in px da misure reali) ---------- *\/\\n  #rey-hero .rey-links { position: absolute; inset: 0; pointer-events: none; z-index: 2; }\\n  #rey-hero .rey-links polyline {\\n    fill: none; stroke: var(--rey-line); stroke-width: 1;\\n  }\\n\\n  \/* ---------- Testo tecnico ---------- *\/\\n  #rey-hero .rey-annot {\\n    position: absolute; z-index: 3; margin: 0;\\n    font-family: Aptos, ui-sans-serif, system-ui, -apple-system, sans-serif;\\n    font-size: 14px;\\n    color:#2F5D4F;\\n    font-weight: bold;\\n    line-height: 1.35;\\n    letter-spacing: 0.02em;\\n    text-transform: uppercase;\\n    \/* La scatola si dimensiona sul TESTO (max-content): le righe sono solo\\n       quelle dei <br \/> nel markup, e la linea disegnata sotto \u2014 che segue la\\n       larghezza della scatola \u2014 combacia da sola col testo. Con la larghezza\\n       fissa di prima, il grassetto aveva allargato le parole oltre la scatola\\n       e la parentesi finiva su una terza riga.\\n       Il max-width \u00e8 la rete di sicurezza sui desktop stretti: meglio un\\n       a-capo in pi\u00f9 che il testo sotto al sasso. *\/\\n    width: max-content;\\n    max-width: min(230px, 22vw);\\n  }\\n  \/* La seconda annotazione sta su UNA riga e si estende verso destra, dove\\n     di spazio ce n'\u00e8 fino al bordo: tetto pi\u00f9 largo del generico qui sopra,\\n     che \u00e8 tarato sul lato del sasso. *\/\\n  #rey-hero #reyA3 { max-width: min(320px, 30vw); }\\n\\n  \/* ---------- Titolo ----------\\n     La tipografia la decide la classe del tema (.uk-heading-large): qui\\n     impostiamo SOLO la posizione. Le propriet\u00e0 tipografiche stanno dentro\\n     :where() cos\u00ec hanno specificit\u00e0 0 e la classe YOOtheme vince sempre \u2014\\n     con `#rey-hero .rey-title` (1,1,0) batteremmo `.uk-heading-large` (0,1,0)\\n     e il titolo non erediterebbe pi\u00f9 lo stile del tema. *\/\\n  \/* Il blocco intestazione: etichetta .label-dot sopra + h1 sotto.\\n     \u00c8 LUI a essere posizionato; il titolo dentro resta in flusso. *\/\\n  #rey-hero .rey-heading {\\n    position: absolute;\\n    left: 3.4%; top: 8%;\\n    z-index: 4;\\n    max-width: 90%;\\n  }\\n  \/* ---------- Etichetta sopra il titolo ----------\\n     Dentro :where() (specificit\u00e0 0) cos\u00ec una eventuale .label-dot del tema\\n     vince sempre su queste regole. La versione precedente usava\\n     `#rey-hero .rey-heading .label-dot` (1,2,0) e schiacciava il\\n     `display:flex` di una .label-dot definita fuori (0,1,0): il pallino\\n     non si disponeva mai. *\/\\n  :where(#rey-hero .label-dot) {\\n    --dot-size: 9px;\\n    --dot-gap: 10px;\\n    display: flex;\\n    align-items: center;\\n    gap: var(--dot-gap);\\n    font-family: Aptos, ui-sans-serif, system-ui, -apple-system, sans-serif;\\n    font-size: 15px;\\n    font-weight: 600;\\n    letter-spacing: 0.04em;\\n    text-transform: uppercase;\\n    position: relative;\\n    left:5px;\\n    \/* --green se il tema la definisce, altrimenti il verde della hero *\/\\n    color: var(--green, var(--rey-accent));\\n  }\\n  :where(#rey-hero .label-dot)::before {\\n    content: \\\"\\\";\\n    flex-shrink: 0;\\n    width: var(--dot-size); height: var(--dot-size);\\n    border-radius: 50%;\\n    background: var(--green, var(--rey-accent));\\n  }\\n  \/* Spaziatura FUORI da :where(): \u00e8 layout, non tipografia, e deve valere\\n     anche se il tema ridefinisce .label-dot.\\n     Nessun margine negativo: il PALLINO parte dal bordo sinistro, in colonna\\n     col titolo sotto. (Sporgendo nel margine si allineerebbe il testo, ma il\\n     riferimento visivo richiesto \u00e8 il pallino.) *\/\\n  #rey-hero .rey-heading .label-dot { margin: 0 0 20px; }\\n\\n  #rey-hero .rey-title { margin: 0; }\\n  \/* fallback tipografico: sparisce appena il tema applica .uk-heading-large *\/\\n  :where(#rey-hero .rey-title) {\\n    font-size: clamp(1.8rem, 3.6vw, 4rem);\\n    line-height: 1.05;\\n    letter-spacing: -0.03em;\\n    font-weight: 500;\\n  }\\n\\n  \/* ---------- Testo + CTA: in basso a sinistra, sotto il titolo ---------- *\/\\n  #rey-hero .rey-foot {\\n    position: absolute;\\n    left: 3.4%; bottom: 10%;\\n    z-index: 4;\\n    \/* min() sceglie il PI\u00d9 PICCOLO dei due: alzare solo i `ch` non allarga\\n       nulla finch\u00e9 l'altro resta pi\u00f9 basso \u2014 vanno mossi INSIEME.\\n       63ch \u2248 576px con Aptos 20px: la larghezza piena, dove c'\u00e8 spazio.\\n       Il secondo termine \u00e8 il tetto GEOMETRICO: la distanza dal bordo\\n       sinistro reale del sasso (misurato: 16.5% del canvas dal suo bordo,\\n       quindi a 33.5% dal centro; il canvas \u00e8 min(500px, 38vw, 60vh)\\n       centrato al 50%, il testo parte al 3.4%) meno 16px di respiro.\\n       Il min() qui DEVE restare identico a quello del canvas-wrap:\\n       se cambi uno, cambia anche l'altro. *\/\\n    max-width: min(63ch, calc(46.6% - 0.335 * min(500px, 38vw, 60vh) - 16px));\\n  }\\n  #rey-hero .rey-foot p {\\n    margin: 0 0 1.4em;\\n    \/* Aptos: gi\u00e0 caricato dal tema. Le altre sono solo rete di sicurezza. *\/\\n    font-family: Aptos, ui-sans-serif, system-ui, -apple-system, sans-serif;\\n    font-size: 20px;\\n    line-height: 1.5;\\n  }\\n  \/* Il bottone usa il componente .rcta del sito: nessuno stile qui, cos\u00ec\\n     resta coerente col resto ed eredita eventuali modifiche future. *\/\\n\\n  \/* ---------- Mini-card immagine (al posto della vecchia card) ---------- *\/\\n  #rey-hero .rey-thumb {\\n    position: absolute; right: 3.4%; top: 25%; z-index: 4; margin: 0;\\n    width: clamp(120px, 13vw, 200px); aspect-ratio: 1 \/ 1;\\n    border: 1px solid var(--rey-line);\\n    background: rgba(255,255,255,.45);\\n    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\\n    overflow: hidden;\\n  }\\n  #rey-hero .rey-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }\\n\\n  \/* ---------- Avanzamento ---------- *\/\\n  #rey-hero .rey-progress {\\n    position: absolute; right: 3.4%; bottom: 10%; z-index: 4;\\n    display: flex; align-items: center; gap: .8em;\\n    font-family: var(--rey-mono); font-size: 10px; letter-spacing: .1em;\\n    color: var(--rey-muted); text-transform: uppercase;\\n  }\\n  #rey-hero .rey-progress__bar {\\n    width: clamp(60px, 8vw, 120px); height: 1px;\\n    background: var(--rey-grid); position: relative; overflow: hidden;\\n  }\\n  #rey-hero .rey-progress__fill {\\n    position: absolute; inset: 0; background: var(--rey-ink);\\n    transform: scaleX(0); transform-origin: left center;\\n  }\\n\\n  \/* ---------- Loader ----------\\n     Su desktop la sequenza pesa ~12 MB: l'attesa \u00e8 reale e va raccontata,\\n     altrimenti sembra una pagina rotta. Percentuale che sale + barra che si\\n     riempie + un riflesso che scorre di continuo, cos\u00ec resta viva anche se\\n     la rete si impunta. *\/\\n  #rey-hero .rey-loader {\\n    position: absolute; inset: 0; z-index: 20;\\n    display: grid; place-items: center; align-content: center; gap: .9em;\\n    background: var(--rey-bg); transition: opacity .7s ease;\\n  }\\n  #rey-hero .rey-loader[data-done=\\\"true\\\"] { opacity: 0; pointer-events: none; }\\n  \/* Il titolo al posto della percentuale: un numero ha senso solo se l'attesa\\n     dura, e quando i frame arrivano tutti insieme si vede il solo \\\"000\\\". *\/\\n  #rey-hero .rey-loader__label {\\n    font-family: Aptos-Light, ui-sans-serif, system-ui, -apple-system, sans-serif;\\n    font-size: 16px;\\n    line-height: 1.4;\\n      font-weight: bold;\\n    text-align: center;\\n    text-wrap: balance;          \/* righe di lunghezza simile, dove supportato *\/\\n    color: #3E6F62;\\n    max-width: min(34ch, 82vw);\\n  }\\n  #rey-hero .rey-loader__bar {\\n    width: min(200px, 30vw); height: 1px; background: var(--rey-grid);\\n    position: relative; overflow: hidden;\\n  }\\n  #rey-hero .rey-loader__fill {\\n    position: absolute; inset: 0; background: var(--rey-line);\\n    transform: scaleX(0); transform-origin: left center;\\n  }\\n  \/* riflesso che scorre: \u00e8 l'unica parte che si muove anche a progresso fermo *\/\\n  #rey-hero .rey-loader__bar::after {\\n    content: \\\"\\\"; position: absolute; inset: 0;\\n    background: linear-gradient(90deg, transparent, var(--rey-line), transparent);\\n    opacity: .55;\\n    transform: translateX(-100%);\\n    animation: reyLoaderSweep 1.5s ease-in-out infinite;\\n  }\\n  @keyframes reyLoaderSweep { to { transform: translateX(100%); } }\\n  @media (prefers-reduced-motion: reduce) {\\n    #rey-hero .rey-loader__bar::after { animation: none; opacity: 0; }\\n  }\\n\\n  \/* ---------- Responsive ----------\\n     Sotto i 960px restano: titolo, animazione, mini-card (piccola, con la\\n     sua linea verso il sasso, come nel riferimento mobile) e testo + CTA.\\n     Spariscono le annotazioni laterali e l'indicatore di avanzamento. *\/\\n  @media (max-width: 960px) {\\n    #rey-hero { height: 320svh; }\\n    #rey-hero .rey-annot, #rey-hero .rey-dot,\\n    #rey-hero .rey-progress { display: none; }\\n    \/* l'unico marcatore che resta: l'aggancio della linea della mini-card,\\n       spostato verso il centro dell'animazione. !important: le coordinate\\n       desktop stanno inline nel markup e senza vincerebbero comunque. *\/\\n    #rey-hero #reyM2 { display: grid; left: 55% !important; top: 40% !important; }\\n    \/* Spazi tarati sul titolo a 3 righe. Le posizioni verticali sono in svh\\n       (viewport CON barra URL): lo stage \u00e8 alto 100vh \u2014 il viewport esteso \u2014\\n       e con le percentuali i contenuti scivolerebbero sotto la piega quando\\n       la barra \u00e8 aperta. La riga in % prima \u00e8 il ripiego per browser vecchi. *\/\\n    \/* Tutto il blocco visivo spostato in ALTO (45svh) per staccare l'ultimo\\n       frame \u2014 il sasso arriva al 95% del riquadro \u2014 dal paragrafo sotto. *\/\\n    #rey-hero .rey-canvas-wrap { width: 64vw; top: 45%; top: 45svh; }\\n    \/* left 6% come il paragrafo sotto, cos\u00ec le colonne di testo sono incolonnate *\/\\n    #rey-hero .rey-heading { left: 6%; top: 4%; top: 4svh; max-width: 88%; }\\n    #rey-hero .rey-thumb {\\n      width: clamp(72px, 21vw, 100px);\\n      right: 6%; top: 26%; top: 26svh;      \/* sotto l'intestazione con l'etichetta *\/\\n    }\\n    \/* bottom riferito allo stage (100vh): per stare a 20px dalla piega del\\n       viewport PICCOLO va aggiunta la differenza fra i due viewport *\/\\n    #rey-hero .rey-foot {\\n      left: 6%; max-width: 88%;\\n      bottom: 20px;\\n      bottom: calc(100% - 100svh + 20px);\\n    }\\n  }\\n\\n  \/* ---------- Tablet (dentro la fascia mobile) ----------\\n     Su tablet il viewport \u00e8 alto ma l'animazione \u00e8 dimensionata in vw:\\n     col testo ancorato al fondo restava un vuoto enorme in mezzo.\\n     Qui il testo si aggancia alla BASE dell'animazione: il sasso finisce a\\n     45svh + 30.4vw (centro 45svh + il 95% di met\u00e0 dei 64vw di lato). *\/\\n  @media (min-width: 600px) and (max-width: 960px) {\\n    #rey-hero .rey-foot {\\n      bottom: auto;                       \/* stacca l'ancora dal fondo *\/\\n      top: calc(45svh + 30.4vw + 20px);   \/* 20px sotto la base del sasso *\/\\n    }\\n  }\\n<\/style>\n\n\\n\\n\n\n<section id=\\\"rey-hero\\\">\\n  \n\n<div class=\\\"rey-stage\\\" id=\\\"reyStage\\\">\\n\\n    <!-- Griglia tecnica -->\\n    <svg class=\\\"rey-grid\\\" viewBox=\\\"0 0 1000 1000\\\" preserveAspectRatio=\\\"none\\\" aria-hidden=\\\"true\\\">\\n      <line x1=\\\"250\\\" y1=\\\"0\\\" x2=\\\"250\\\" y2=\\\"1000\\\"><\/line>\\n      <line x1=\\\"500\\\" y1=\\\"0\\\" x2=\\\"500\\\" y2=\\\"1000\\\"><\/line>\\n      <line x1=\\\"750\\\" y1=\\\"0\\\" x2=\\\"750\\\" y2=\\\"1000\\\"><\/line>\\n      <line x1=\\\"0\\\" y1=\\\"333\\\" x2=\\\"1000\\\" y2=\\\"333\\\"><\/line>\\n      <line x1=\\\"0\\\" y1=\\\"667\\\" x2=\\\"1000\\\" y2=\\\"667\\\"><\/line>\\n    <\/svg>\\n    <\/p>\n<div class=\\\"rey-crosses\\\" id=\\\"reyCrosses\\\" aria-hidden=\\\"true\\\"><\/div>\n<p>\\n\\n    <!-- Collegamenti: i punti li calcola il JS dalle misure reali -->\\n    <svg class=\\\"rey-links\\\" id=\\\"reyLinks\\\" aria-hidden=\\\"true\\\"><\/svg>\\n\\n    <!-- Intestazione: etichetta del tema + titolo (uk-heading-large) -->\\n    <\/p>\n<div class=\\\"rey-heading\\\" id=\\\"reyHeading\\\">\\n      <span class=\\\"label-dot\\\">From seeds to ingredients<\/span>\\n      <\/p>\n<h1 class=\\\"rey-title uk-heading-large\\\">Botanica ed estrazione,<br \/>\\n        in un\u2019unica piattaforma industriale.\\n      <\/h1>\n<p>\\n    <\/p><\/div>\n<p>\\n\\n    <!-- Sequenza -->\\n    <\/p>\n<div class=\\\"rey-canvas-wrap\\\" id=\\\"reyWrap\\\">\\n      <\/p>\n<div class=\\\"rey-canvas-inner\\\" id=\\\"reyInner\\\">\\n        <canvas class=\\\"rey-canvas\\\" id=\\\"reyCanvas\\\"><\/canvas>\\n      <\/div>\n<p>\\n      <!-- marcatori in % del riquadro del canvas: seguono il sasso -->\\n      <span class=\\\"rey-dot\\\" id=\\\"reyM1\\\" style=\\\"left:18%; top:52%\\\"><\/span>\\n      <span class=\\\"rey-dot\\\" id=\\\"reyM2\\\" style=\\\"left:80%; top:44%\\\"><\/span>\\n      <span class=\\\"rey-dot\\\" id=\\\"reyM3\\\" style=\\\"left:62%; top:70%\\\"><\/span>\\n    <\/div>\n<p>\\n\\n    <!-- Annotazioni -->\\n    <\/p>\n<p class=\\\"rey-annot\\\" id=\\\"reyA1\\\" style=\\\"left:15%; top:41%\\\">\\n      [ Coltivazione<br \/>in ambiente controllato ]\\n    <\/p>\n<p>\\n    <\/p>\n<p class=\\\"rey-annot\\\" id=\\\"reyA3\\\" style=\\\"left:62%; top:70%\\\">\\n      [ Estrazione e tracciabilit\u00e0 ]\\n    <\/p>\n<p>\\n\\n    <!-- Mini-card -->\\n    <\/p>\n<figure class=\\\"rey-thumb\\\" id=\\\"reyThumb\\\"><img id=\\\"reyThumbImg\\\" alt=\\\"\\\" decoding=\\\"async\\\"><\/figure>\n<p>\\n\\n    <!-- Piede -->\\n    <\/p>\n<div class=\\\"rey-foot\\\" id=\\\"reyFoot\\\">\\n      <\/p>\n<p>Reytera integra sviluppo botanico, coltivazione in ambiente controllato e processi di trasformazione per creare ingredienti vegetali controllati, ripetibili e tracciabili, sviluppati su specifica insieme al cliente.<\/p>\n<p>\\n      <a class=\\\"rcta rcta--primary rcta--green rcta--pill rcta--sm\\\" href=\\\"mailto:amministrazione@reytera.it\\\" data-rcta>\\n        <span class=\\\"rcta__text\\\"><span class=\\\"rcta__label\\\">Proponi una partnership<\/span><\/span>\\n      <\/a>\\n    <\/div>\n<p>\\n\\n    <!-- Avanzamento -->\\n    <\/p>\n<div class=\\\"rey-progress\\\" id=\\\"reyProgress\\\">\\n      <span id=\\\"reyCounter\\\">001<\/span>\\n      <span class=\\\"rey-progress__bar\\\"><span class=\\\"rey-progress__fill\\\" id=\\\"reyProgressFill\\\"><\/span><\/span>\\n      <span id=\\\"reyTotal\\\">240<\/span>\\n    <\/div>\n<p>\\n\\n   <!-- Loader -->\\n<\/p>\n<div class=\\\"rey-loader\\\" id=\\\"reyLoader\\\">\\n    <img class=\\\"rey-loader__img\\\" src=\\\"\/wp-content\/uploads\/2026\/07\/img2.png\\\" alt=\\\"Reytera\\\" width=\\\"100\\\" height=\\\"100\\\">\\n    <span class=\\\"rey-loader__label\\\">DAL SEME ALL'INGREDIENTE<\/span>\\n    <span class=\\\"rey-loader__bar\\\"><span class=\\\"rey-loader__fill\\\" id=\\\"reyLoaderFill\\\"><\/span><\/span>\\n  <\/div>\n<p>\\n\\n  <\/p><\/div>\n<p>\\n<\/section>\n<p>\\n\\n<script src=\\\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/gsap.min.js\\\"><\/script>\\n<script src=\\\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.5\/dist\/ScrollTrigger.min.js\\\"><\/script>\\n\\n<script>\\n(function () {\\n  if (window.__reyHeroInit) return;      \/\/ l'anteprima del builder pu\u00f2 rieseguire il blocco\\n  window.__reyHeroInit = true;\\n\\n  \/* ==========================================================================\\n     CONFIG \u2014 l'unico blocco da toccare\\n     ========================================================================== *\/\\n  const CONFIG = {\\n    \/* I frame DEVONO essere trasparenti (AVIF con alpha): il sasso galleggia\\n       sopra la griglia. Il path deve finire con '\/'.\\n       Cartella nuova (-v2) invece di sovrascrivere la vecchia: cos\u00ec la cache\\n       del browser e della CDN non pu\u00f2 servire i frame della grafica passata. *\/\\n    path: '\/wp-content\/uploads\/2026\/frames-v4\/',\\n    firstFrame: 1,\\n    lastFrame: 240,\\n    padding: 4,\\n    extension: 'jpg',\\n\\n    scrub: 1.1,          \/\/ inerzia dello scrub (0.5 reattivo \u2014 2 morbido)\\n    frameEnd: 0.94,      \/\/ a che punto dello scroll finisce la sequenza\\n    fitPadding: 0.98,    \/\/ quanto il render riempie il canvas\\n\\n    idleAmplitude: 8,    \/\/ galleggiamento: tiene viva la scena a scroll fermo\\n    idlePeriod: 7,\\n    idleRotation: 0.4,\\n    pointerStrength: 12,\\n    pointerEase: 0.05,\\n\\n    \/* Quanti frame bastano per mostrare la hero: il resto continua a\\n       scaricarsi in sottofondo, cos\u00ec non si aspettano tutti i megabyte.\\n       Tenuto basso di proposito: ogni frame desktop pesa ~47 KB, quindi 14\\n       frame = ~650 KB di attesa invece di 1,4 MB. Scorrendo subito si pu\u00f2\\n       superare i frame pronti, ma il ripiego di `nearestLoaded` mostra il\\n       pi\u00f9 vicino disponibile invece di lasciare il canvas vuoto. *\/\\n    warmupFrames: 14,\\n\\n    \/* Set alternativo per TELEFONO \u2014 non \u00e8 un vezzo, \u00e8 necessario:\\n       250 frame da 600px occupano ~343 MB una volta decodificati\\n       (600*600*4 byte l'uno) e Safari iOS li scarica o crasha molto prima.\\n       125 frame da 360px = ~62 MB e 3 MB di download. Sul canvas mobile,\\n       largo ~262 px CSS, la differenza di nitidezza non si vede. *\/\\n    mobile: {\\n      path: '\/wp-content\/uploads\/2026\/frames-v4-m\/',\\n      lastFrame: 120,\\n      warmupFrames: 10,\\n    },\\n  };\\n\\n  const MOBILE_QUERY = '(max-width: 960px)';\\n  \/\/ La scelta \u00e8 fatta una volta sola all'avvio: cambiare set a caldo\\n  \/\/ significherebbe ricaricare tutto durante lo scroll.\\n  if (matchMedia(MOBILE_QUERY).matches) Object.assign(CONFIG, CONFIG.mobile);\\n\\n  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;\\n  const $ = (sel) => document.querySelector(sel);\\n\\n  \/* ==========================================================================\\n     Griglia \u2014 crocette agli incroci delle linee\\n     ========================================================================== *\/\\n  function buildCrosses() {\\n    const host = $('#reyCrosses');\\n    if (!host) return;\\n    const xs = [25, 50, 75];\\n    const ys = [33.3, 66.7];\\n    host.innerHTML = xs.flatMap((x) => ys.map((y) =>\\n      `<span class=\\\"rey-cross\\\" style=\\\"left:${x}%; top:${y}%\\\"><\/span>`\\n    )).join('');\\n  }\\n\\n  \/* ==========================================================================\\n     Collegamenti \u2014 polilinee da un bordo all'altro, in pixel reali.\\n     Forma: orizzontale \u00b7 diagonale \u00b7 orizzontale (come nel riferimento).\\n     ========================================================================== *\/\\n  const LINKS = [\\n    { from: '#reyA1',    to: '#reyM1' },   \/\/ annotazione sinistra \u2192 sasso\\n    { from: '#reyThumb', to: '#reyM2', node: true }, \/\/ mini-card \u2192 sasso\\n    { from: '#reyA3',    to: '#reyM3' },   \/\/ annotazione bassa    \u2192 sasso\\n  ];\\n\\n  function drawLinks() {\\n    const svg = $('#reyLinks');\\n    const stage = $('#reyStage');\\n    if (!svg || !stage) return;\\n\\n    const box = stage.getBoundingClientRect();\\n    svg.setAttribute('width', box.width);\\n    svg.setAttribute('height', box.height);\\n    svg.setAttribute('viewBox', `0 0 ${box.width} ${box.height}`);\\n\\n    \/\/ distanza fra la base del testo e la linea che lo sottolinea\\n    const LABEL_GAP = 6;\\n\\n    \/* Aggancio su un'ETICHETTA: la linea fa da sottolineatura, quindi parte\\n       dal bordo INFERIORE e dal lato OPPOSTO al target \u2014 cos\u00ec corre sotto\\n       tutta la larghezza del testo, come nel riferimento. Agganciandola al\\n       centro verticale, invece, la linea spaccherebbe il testo a met\u00e0. *\/\\n    const labelAnchor = (el, towardX) => {\\n      const r = el.getBoundingClientRect();\\n      const goingRight = towardX > (r.left + r.width \/ 2);\\n      const x = goingRight ? r.left : r.right;\\n      return { x: x - box.left, y: r.bottom - box.top + LABEL_GAP, width: r.width };\\n    };\\n\\n    \/* Aggancio su un NODO (marcatore, immagine): dal bordo rivolto verso\\n       l'altro elemento, a met\u00e0 altezza. *\/\\n    const nodeAnchor = (el, towardX) => {\\n      const r = el.getBoundingClientRect();\\n      const x = towardX > (r.left + r.width \/ 2) ? r.right : r.left;\\n      return { x: x - box.left, y: r.top + r.height \/ 2 - box.top, width: r.width };\\n    };\\n\\n    svg.innerHTML = LINKS.map(({ from, to, node }) => {\\n      const a = $(from), b = $(to);\\n      if (!a || !b) return '';\\n      \/\/ endpoint nascosto (es. annotazioni su mobile): niente linea,\\n      \/\/ altrimenti finirebbe agganciata a un rettangolo 0x0 in alto a sinistra\\n      if (!a.getClientRects().length || !b.getClientRects().length) return '';\\n      const rb = b.getBoundingClientRect();\\n      const ra = a.getBoundingClientRect();\\n\\n      const deltaX = (rb.left + rb.width \/ 2) - (ra.left + ra.width \/ 2);\\n      const deltaY = (rb.top + rb.height \/ 2) - (ra.top + ra.height \/ 2);\\n\\n      \/* Collegamento prevalentemente VERTICALE tra due nodi (su mobile la\\n         mini-card sta sopra il sasso): scende dal bordo basso, diagonale,\\n         entra dall'alto \u2014 come nel riferimento mobile. La forma orizzontale\\n         qui produrrebbe una S schiacciata illeggibile. *\/\\n      const verticale = node ? Math.abs(deltaY) > Math.abs(deltaX) : false;\\n      if (verticale) {\\n        const dirY = Math.sign(deltaY) || 1;\\n        const p0 = {\\n          x: ra.left + ra.width \/ 2 - box.left,\\n          y: (dirY > 0 ? ra.bottom : ra.top) - box.top,\\n        };\\n        const p3 = {\\n          x: rb.left + rb.width \/ 2 - box.left,\\n          y: (dirY > 0 ? rb.top : rb.bottom) - box.top,\\n        };\\n        const spanY = p3.y - p0.y;\\n        const e1 = p0.y + spanY * 0.38;\\n        const e2 = p3.y - spanY * 0.18;\\n        const pts = [\\n          `${p0.x},${p0.y}`, `${p0.x},${e1}`, `${p3.x},${e2}`, `${p3.x},${p3.y}`,\\n        ].join(' ');\\n        return `<polyline class=\\\"rey-link\\\" points=\\\"${pts}\\\"><\/polyline>`;\\n      }\\n\\n      const p0 = (node ? nodeAnchor : labelAnchor)(a, rb.left + rb.width \/ 2);\\n      const p3 = nodeAnchor(b, ra.left + ra.width \/ 2);\\n\\n      const span = p3.x - p0.x;\\n      const dir = Math.sign(span) || 1;\\n      \/\/ il primo tratto deve superare il testo, altrimenti la diagonale\\n      \/\/ partirebbe da sotto le parole invece che dopo\\n      const minRun = node ? 24 : p0.width + 24;\\n      const run = Math.min(Math.max(Math.abs(span) * 0.38, minRun), Math.abs(span) * 0.75);\\n      const e1 = p0.x + dir * run;\\n      const e2 = p3.x - span * 0.18;\\n      const pts = [\\n        `${p0.x},${p0.y}`, `${e1},${p0.y}`, `${e2},${p3.y}`, `${p3.x},${p3.y}`,\\n      ].join(' ');\\n      return `<polyline class=\\\"rey-link\\\" points=\\\"${pts}\\\"><\/polyline>`;\\n    }).join('');\\n  }\\n\\n  \/* ==========================================================================\\n     FrameSequence \u2014 carica i frame e li disegna \\\"contain\\\", con crossfade\\n     in alpha tra frame adiacenti.\\n     ========================================================================== *\/\\n  class FrameSequence {\\n    constructor(canvas, config) {\\n      this.canvas = canvas;\\n      this.context = canvas.getContext('2d', { alpha: true });\\n      this.config = config;\\n      this.images = [];\\n      this.frameIndex = 0;\\n      this.lastWidth = 0;\\n      this.lastHeight = 0;\\n      \/* Prefisso contiguo: quanti frame consecutivi dall'inizio sono gi\u00e0\\n         scaricati. L'animazione non va mai oltre: senza questo tetto, con\\n         il download ancora in corso il ripiego saltava fra i pochi frame\\n         disponibili e su mobile la sequenza \\\"partiva a pezzi\\\". *\/\\n      this.loadedFlags = [];\\n      this.readyPrefix = 0;\\n      this.pendingProgress = null;\\n      this.handleResize = this.handleResize.bind(this);\\n    }\\n\\n    markLoaded(index) {\\n      this.loadedFlags[index] = true;\\n      while (this.loadedFlags[this.readyPrefix]) this.readyPrefix += 1;\\n      \/* se lo scroll era gi\u00e0 pi\u00f9 avanti dei frame pronti, appena il prefisso\\n         cresce l'animazione recupera da sola, anche a dito fermo *\/\\n      if (this.pendingProgress !== null) this.setProgress(this.pendingProgress);\\n    }\\n\\n    get frameCount() { return this.config.lastFrame - this.config.firstFrame + 1; }\\n\\n    urlForIndex(index) {\\n      const n = this.config.firstFrame + index;\\n      return `${this.config.path}${String(n).padStart(this.config.padding, '0')}.${this.config.extension}`;\\n    }\\n\\n    loadOne(index) {\\n      return new Promise((resolve) => {\\n        const image = new Image();\\n        image.onload = () => { this.markLoaded(index); resolve(image); };\\n        \/* anche un frame rotto avanza il prefisso: significa \\\"non lo stiamo\\n           pi\u00f9 aspettando\\\". Al disegno ci pensa il ripiego di nearestLoaded \u2014\\n           altrimenti un solo 404 inchioderebbe l'animazione l\u00ec per sempre. *\/\\n        image.onerror = () => { this.markLoaded(index); resolve(image); };\\n        image.src = this.urlForIndex(index);\\n        this.images[index] = image;\\n      });\\n    }\\n\\n    \/** Progressivo: risolve dopo i primi `warmupFrames`, il resto arriva dopo. *\/\\n    load(onProgress) {\\n      let loaded = 0;\\n      const total = this.frameCount;\\n      const warmup = Math.min(this.config.warmupFrames, total);\\n      \/* L'avanzamento va rapportato a `warmup`, non a `total`: il loader\\n         sparisce quando i primi `warmup` sono pronti, quindi con `total` la\\n         barra arrivava al 12% e poi svaniva a met\u00e0. *\/\\n      const track = (p) => p.then((img) => {\\n        loaded += 1;\\n        onProgress(Math.min(1, loaded \/ warmup));\\n        return img;\\n      });\\n\\n      const first = [];\\n      for (let i = 0; i < warmup; i += 1) first.push(track(this.loadOne(i)));\\n\\n      return Promise.all(first).then((r) => {\\n        for (let i = warmup; i < total; i += 1) track(this.loadOne(i));\\n        return r;\\n      });\\n    }\\n\\n    init() {\\n      addEventListener('resize', this.handleResize);\\n      this.handleResize();\\n    }\\n\\n    handleResize() {\\n      const ratio = Math.min(devicePixelRatio || 1, 2);   \/\/ cap DPR\\n      const { clientWidth, clientHeight } = this.canvas;\\n\\n      \/* Su telefono la barra dell'indirizzo che entra ed esce scatena resize\\n         continui durante lo scroll: ridimensionare il canvas ogni volta lo\\n         svuota e lo ridisegna per nulla. Saltiamo le variazioni trascurabili.\\n         NB: in questo script non esiste l'operatore AND scritto coi simboli:\\n         WordPress converte quel carattere in entita' HTML e lo script muore\\n         con un SyntaxError (successo davvero, due volte). Usare if annidati. *\/\\n      const widthDelta = Math.abs(clientWidth - this.lastWidth);\\n      const heightDelta = Math.abs(clientHeight - this.lastHeight);\\n      if (Math.max(widthDelta, heightDelta) < 2) return;\\n      this.lastWidth = clientWidth;\\n      this.lastHeight = clientHeight;\\n\\n      this.canvas.width = clientWidth * ratio;\\n      this.canvas.height = clientHeight * ratio;\\n      this.context.setTransform(ratio, 0, 0, ratio, 0, 0);\\n      this.redraw();\\n    }\\n\\n    setProgress(progress) {\\n      const clamped = Math.min(1, Math.max(0, progress));\\n      \/* memorizzata PRIMA del tetto: quando il prefisso cresce, markLoaded\\n         la rigioca e l'animazione recupera la posizione vera dello scroll *\/\\n      this.pendingProgress = clamped;\\n      let next = clamped * (this.frameCount - 1);\\n      \/* mai oltre l'ultimo frame contiguo gi\u00e0 scaricato: la sequenza avanza\\n         solo in ordine, niente salti mentre il download \u00e8 in corso *\/\\n      const maxReady = this.readyPrefix - 1;\\n      if (maxReady < 0) return;\\n      if (next > maxReady) next = maxReady;\\n      if (Math.abs(next - this.frameIndex) < 0.01) return;\\n      this.frameIndex = next;\\n      this.redraw();\\n    }\\n\\n    \/* Il frame pi\u00f9 vicino gi\u00e0 scaricato. Serve perch\u00e9 il resto della sequenza\\n       arriva in sottofondo: scorrendo in fretta si pu\u00f2 chiedere un frame non\\n       ancora pronto, e senza ripiego il canvas resterebbe vuoto (lampo bianco). *\/\\n    nearestLoaded(index) {\\n      for (let d = 0; d < this.frameCount; d += 1) {\\n        const before = this.images[index - d];\\n        if (before) { if (before.naturalWidth) return before; }\\n        const after = this.images[index + d];\\n        if (after) { if (after.naturalWidth) return after; }\\n      }\\n      return null;\\n    }\\n\\n    redraw() {\\n      const { clientWidth: w, clientHeight: h } = this.canvas;\\n      this.context.clearRect(0, 0, w, h);\\n      const base = Math.floor(this.frameIndex);\\n      const blend = this.frameIndex - base;\\n      \/\/ il frame base ha diritto al ripiego, il compagno di crossfade no:\\n      \/\/ se manca lo saltiamo, invece di disegnare due volte lo stesso\\n      this.drawFrame(base, 1, true);\\n      if (blend > 0) { if (base + 1 < this.frameCount) this.drawFrame(base + 1, blend, false); }\\n    }\\n\\n    drawFrame(index, alpha, allowFallback) {\\n      let image = this.images[index];\\n      if (allowFallback) { if (!image || !image.naturalWidth) image = this.nearestLoaded(index); }\\n      if (!image || !image.naturalWidth) return;\\n      const { clientWidth: w, clientHeight: h } = this.canvas;\\n      const scale = Math.min(w \/ image.naturalWidth, h \/ image.naturalHeight) * this.config.fitPadding;\\n      const dw = image.naturalWidth * scale;\\n      const dh = image.naturalHeight * scale;\\n      this.context.globalAlpha = alpha;\\n      this.context.drawImage(image, (w - dw) \/ 2, (h - dh) \/ 2, dw, dh);\\n      this.context.globalAlpha = 1;\\n    }\\n  }\\n\\n  \/* ==========================================================================\\n     AmbientMotion \u2014 galleggiamento + parallasse sul puntatore.\\n     Solo transform CSS sul canvas: nessun redraw della sequenza.\\n     ========================================================================== *\/\\n  class AmbientMotion {\\n    constructor(element, config) {\\n      this.element = element;\\n      this.config = config;\\n      this.elapsed = 0;\\n      this.target = { x: 0, y: 0 };\\n      this.current = { x: 0, y: 0 };\\n      this.set = gsap.quickSetter(element, 'css');\\n      this.onPointerMove = this.onPointerMove.bind(this);\\n      this.update = this.update.bind(this);\\n    }\\n\\n    init() {\\n      addEventListener('pointermove', this.onPointerMove, { passive: true });\\n      gsap.ticker.add(this.update);\\n    }\\n\\n    onPointerMove(e) {\\n      this.target.x = (e.clientX \/ innerWidth) * 2 - 1;\\n      this.target.y = (e.clientY \/ innerHeight) * 2 - 1;\\n    }\\n\\n    update(time, deltaMs) {\\n      const c = this.config;\\n      this.elapsed += deltaMs \/ 1000;\\n      this.current.x += (this.target.x - this.current.x) * c.pointerEase;\\n      this.current.y += (this.target.y - this.current.y) * c.pointerEase;\\n\\n      const phase = (this.elapsed \/ c.idlePeriod) * Math.PI * 2;\\n      \/\/ seno e coseno sfasati: percorso a otto schiacciato, non un su-gi\u00f9 meccanico\\n      const floatY = Math.sin(phase) * c.idleAmplitude;\\n      const floatX = Math.cos(phase * 0.5) * c.idleAmplitude * 0.35;\\n      const tilt = Math.sin(phase * 0.5) * c.idleRotation;\\n\\n      this.set({\\n        x: floatX - this.current.x * c.pointerStrength,\\n        y: floatY - this.current.y * c.pointerStrength * 0.6,\\n        rotation: tilt + this.current.x * 0.35,\\n      });\\n    }\\n  }\\n\\n  \/* ==========================================================================\\n     Ingresso \u2014 le linee si disegnano, i marcatori scattano, i testi salgono.\\n     \u00c8 la firma visiva del riferimento: senza, sembra una schermata fissa.\\n     ========================================================================== *\/\\n  function playIntro() {\\n    if (reduced) return;\\n\\n    const lines = document.querySelectorAll('#reyLinks polyline');\\n    lines.forEach((line) => {\\n      const len = line.getTotalLength();\\n      gsap.set(line, { strokeDasharray: len, strokeDashoffset: len });\\n    });\\n\\n    gsap.timeline({\\n      defaults: { ease: 'power3.out' },\\n      \/\/ Durante l'ingresso i testi sono ancora sfalsati di qualche pixel: se in\\n      \/\/ quel momento qualcosa ridisegna i collegamenti (es. ScrollTrigger.refresh)\\n      \/\/ le linee restano agganciate alla posizione intermedia. Ridisegniamo a fine\\n      \/\/ animazione, quando tutto \u00e8 al posto definitivo.\\n      onComplete: drawLinks,\\n    })\\n      .from('#rey-hero .rey-grid, #rey-hero .rey-crosses', { opacity: 0, duration: 1.1 }, 0)\\n      .from('#reyHeading',           { y: 26, opacity: 0, duration: 1 }, 0.1)\\n      .from('#reyInner',             { opacity: 0, scale: 0.95, duration: 1.2 }, 0.15)\\n      .to(lines,                     { strokeDashoffset: 0, duration: 0.9, stagger: 0.09 }, 0.5)\\n      .from('#rey-hero .rey-dot',    { scale: 0, opacity: 0, duration: 0.5, stagger: 0.08, ease: 'back.out(2)' }, 0.8)\\n      .from('#rey-hero .rey-annot',  { y: 12, opacity: 0, duration: 0.7, stagger: 0.08 }, 0.9)\\n      .from('#reyThumb',             { scale: 0.85, opacity: 0, duration: 0.8 }, 0.95)\\n      .from('#reyFoot',              { y: 14, opacity: 0, duration: 0.8 }, 1.05)\\n      .from('#reyProgress',          { opacity: 0, duration: 0.6 }, 1.15);\\n  }\\n\\n  \/* ==========================================================================\\n     Avvio\\n     ========================================================================== *\/\\n  function start(canvas) {\\n    gsap.registerPlugin(ScrollTrigger);\\n\\n    \/* Su telefono la comparsa\/scomparsa della barra dell'indirizzo genera un\\n       resize: senza questo, ScrollTrigger ricalcola il pin a met\u00e0 scroll e\\n       l'animazione \\\"salta\\\". Con ignoreMobileResize quei micro-resize verticali\\n       vengono ignorati. *\/\\n    ScrollTrigger.config({ ignoreMobileResize: true });\\n\\n    const hero = $('#rey-hero');\\n    const stage = $('#reyStage');\\n    const loader = $('#reyLoader');\\n    const loaderFill = $('#reyLoaderFill');\\n    const counter = $('#reyCounter');\\n    const progressFill = $('#reyProgressFill');\\n\\n    buildCrosses();\\n\\n    const sequence = new FrameSequence(canvas, CONFIG);\\n    const ambient = new AmbientMotion(canvas, CONFIG);\\n\\n    $('#reyTotal').textContent = String(sequence.frameCount);\\n    \/\/ la mini-card mostra l'ultimo frame: il \\\"dopo\\\" accanto all'animazione in corso\\n    const thumb = $('#reyThumbImg');\\n    if (thumb) thumb.src = sequence.urlForIndex(sequence.frameCount - 1);\\n\\n    const redrawLinks = () => drawLinks();\\n\\n    sequence.load((p) => {\\n      gsap.to(loaderFill, { scaleX: p, duration: 0.3, ease: 'power2.out', overwrite: true });\\n    }).then(() => {\\n      sequence.init();\\n      sequence.setProgress(0);\\n      \/* La barra \u00e8 animata con 0.3s di transizione: su connessioni veloci il\\n         caricamento finisce prima che lei arrivi in fondo, e si vedrebbe\\n         sparire a met\u00e0. La portiamo a fondo mentre parte la dissolvenza. *\/\\n      gsap.to(loaderFill, { scaleX: 1, duration: 0.25, ease: 'power2.out', overwrite: true });\\n      loader.dataset.done = 'true';\\n\\n      drawLinks();\\n      addEventListener('resize', redrawLinks);\\n      playIntro();\\n\\n      if (reduced) {\\n        sequence.frameIndex = sequence.frameCount - 1;\\n        sequence.redraw();\\n        return;\\n      }\\n\\n      ambient.init();\\n\\n      \/\/ Playhead proxy: lo scrub ammorbidisce QUESTO valore e da qui si\\n      \/\/ disegnano i frame. Leggere il progress grezzo salterebbe lo smussamento.\\n      const playhead = { progress: 0 };\\n\\n      const timeline = gsap.timeline({\\n        scrollTrigger: {\\n          trigger: hero,\\n          start: 'top top',\\n          end: 'bottom bottom',\\n          scrub: CONFIG.scrub,\\n          \/\/ PIN: lo stage resta inchiodato per tutta la sezione.\\n          \/\/ pinSpacing:false perch\u00e9 l'altezza (400vh) fornisce gi\u00e0 lo scroll.\\n          pin: stage,\\n          pinSpacing: false,\\n          pinType: 'fixed',\\n          anticipatePin: 1,\\n          \/* NIENTE invalidateOnRefresh: azzerava il playhead a ogni refresh\\n             di ScrollTrigger e su mobile, tornando su dalla fine, faceva\\n             lampeggiare il PRIMO frame prima di riallinearsi allo scroll.\\n             Il tween \u00e8 un semplice 0\u21921: non c'\u00e8 nulla da ricalcolare. *\/\\n          onRefresh: redrawLinks,\\n        },\\n      });\\n\\n      timeline.to(playhead, {\\n        progress: 1,\\n        ease: 'none',\\n        duration: CONFIG.frameEnd,\\n        onUpdate: () => {\\n          sequence.setProgress(playhead.progress);\\n          const current = Math.round(playhead.progress * (sequence.frameCount - 1)) + 1;\\n          counter.textContent = String(current).padStart(3, '0');\\n          gsap.set(progressFill, { scaleX: playhead.progress });\\n        },\\n      }, 0);\\n\\n      \/\/ coda: l'ultimo frame resta fermo e visibile fino a fine sezione\\n      timeline.to({}, { duration: 1 - CONFIG.frameEnd }, CONFIG.frameEnd);\\n\\n      ScrollTrigger.refresh();\\n      if (document.readyState !== 'complete') {\\n        addEventListener('load', () => {\\n          sequence.handleResize();\\n          drawLinks();\\n          ScrollTrigger.refresh();\\n        });\\n      }\\n    });\\n  }\\n\\n  let tries = 0;\\n  function boot() {\\n    const canvas = $('#reyCanvas');\\n    let ready = false;\\n    if (canvas) { if (typeof gsap !== 'undefined') { if (typeof ScrollTrigger !== 'undefined') ready = true; } }\\n    if (!ready) {\\n      if (tries++ < 60) setTimeout(boot, 100);\\n      return;\\n    }\\n    start(canvas);\\n  }\\n\\n  if (document.readyState === 'loading') {\\n    document.addEventListener('DOMContentLoaded', boot);\\n  } else {\\n    boot();\\n  }\\n})();\\n<\/script>\\n\"},\"name\":\"hero testo nuovo asset v4\"}]}],\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"}}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<section class=\\\"fm-reveal\\\">\\n  <\/p>\n<div class=\\\"fm-reveal__sticky\\\">\\n\\n    <!-- Griglia: 3 righe x 4 colonne (linee verticali a 25\/50\/75%,\\n         come la griglia SVG della hero) -->\\n    <\/p>\n<div class=\\\"fm-grid\\\" aria-hidden=\\\"true\\\">\\n      <\/p>\n<div class=\\\"fm-grid__row\\\">\\n        <\/p>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n      <\/p>\n<div class=\\\"fm-grid__row\\\">\\n        <\/p>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n      <\/p>\n<div class=\\\"fm-grid__row\\\">\\n        <\/p>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<div class=\\\"fm-grid__cell\\\"><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n      <span class=\\\"fm-grid__hline fm-grid__hline--1\\\"><\/span>\\n      <span class=\\\"fm-grid__hline fm-grid__hline--2\\\"><\/span>\\n    <\/div>\n<p>\\n\\n    <\/p>\n<div class=\\\"fm-reveal__row\\\">\\n\\n      <!-- Tendina: il wrapper parte a width 0 e si allarga.\\n           4 immagini impilate: la prima viene scoperta dalla tendina,\\n           le successive subentrano in crossfade a ogni step.\\n            SEGNAPOSTO: sostituisci i 4 src con le immagini caricate su WordPress. -->\\n      <\/p>\n<div class=\\\"fm-reveal__media\\\">\\n        <img class=\\\"fm-reveal__img\\\" src=\\\"\/wp-content\/uploads\/2026\/09\/Green_leaf_surface_with_veins_2026080414314-1-1.jpeg\\\" alt=\\\"\\\">\\n        <img class=\\\"fm-reveal__img\\\" src=\\\"\/wp-content\/uploads\/2026\/09\/c8ede2d5020e67741c333699a54e11e2.jpg\\\" alt=\\\"controllo\\\">\\n        <img class=\\\"fm-reveal__img\\\" src=\\\"\/wp-content\/uploads\/2026\/08\/fresco-reytera-output.jpg\\\" alt=\\\"\\\">\\n        <img class=\\\"fm-reveal__img\\\" src=\\\"\/wp-content\/uploads\/2026\/09\/Chamomile_and_leaves_in_liquid_2026090111551-1.jpeg\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n\\n      <!-- Blocco titolo: eyebrow \\\"[ 01. ]\\\" + heading con ry-blur -->\\n      <\/p>\n<div class=\\\"fm-reveal__title-block\\\">\\n        <\/p>\n<div class=\\\"uk-h5 uk-text-primary uk-margin-small-bottom uk-width-small fm-reveal__eyebrow\\\">[ 01. ]<\/div>\n<p>\\n        <\/p>\n<h2 class=\\\"uk-heading-large fm-reveal__title\\\">La natura cambia.<br \/>Il tuo prodotto non pu&ograve; permetterselo.<\/h2>\n<p>\\n      <\/p><\/div>\n<p>\\n\\n      <!-- Blocco paragrafo: label-dot + paragrafo con classi del tema\\n           (eredita font\/colore). NIENTE uk-parallax: nella sezione sticky\\n           sbaglierebbe i calcoli, il fade-in identico lo fa la timeline. -->\\n      <!-- 4 slide di testo impilate nella stessa cella: ne e' visibile una\\n           alla volta, in sync con l'immagine corrispondente.\\n            SEGNAPOSTO: sostituisci label e paragrafi degli step 2-4. -->\\n      <\/p>\n<div class=\\\"fm-reveal__para-block\\\">\\n        <\/p>\n<div class=\\\"fm-reveal__para-slide\\\">\\n          <span class=\\\"label-dot fm-reveal__label\\\">Il problema<\/span>\\n          <\/p>\n<div class=\\\"uk-panel paragrafo testi-effect fm-reveal__para\\\">Stagionalit&agrave;, origine geografica e filiere frammentate possono generare variazioni nella qualit&agrave; e nel profilo botanico da un raccolto all&rsquo;altro. Anche una materia prima di valore non basta: per tradurne il potenziale in un ingrediente coerente con le specifiche serve un processo di trasformazione dedicato.<\/div>\n<p>\\n        <\/p><\/div>\n<p>\\n        <\/p>\n<div class=\\\"fm-reveal__para-slide\\\">\\n          <span class=\\\"label-dot fm-reveal__label\\\">Continuit\u00e0 e controllo<\/span>\\n          <\/p>\n<div class=\\\"uk-panel paragrafo testi-effect fm-reveal__para\\\"><strong>Lo stesso standard, nel tempo.<\/strong>\\nIl controllo delle principali variabili, insieme a tracciabilit\u00e0 e analisi, riduce la dipendenza da stagionalit\u00e0, clima e origine, favorendo maggiore continuit\u00e0 tra i lotti.<\/div>\n<p>\\n        <\/p><\/div>\n<p>\\n        <\/p>\n<div class=\\\"fm-reveal__para-slide\\\">\\n          <span class=\\\"label-dot fm-reveal__label\\\">Scala industriale<\/span>\\n          <\/p>\n<div class=\\\"uk-panel paragrafo testi-effect fm-reveal__para\\\"><strong>Volumi industriali. Costi competitivi a parit\u00e0 di standard.<\/strong>\\nL\u2019impianto \u00e8 dimensionato per gestire produzioni industriali. Scala, automazione e integrazione del processo consentono di competere con alternative realmente comparabili per specifiche, qualit\u00e0, tracciabilit\u00e0, performance e continuit\u00e0 di fornitura.<\/div>\n<p>\\n        <\/p><\/div>\n<p>\\n        <\/p>\n<div class=\\\"fm-reveal__para-slide\\\">\\n          <span class=\\\"label-dot fm-reveal__label\\\">Sviluppo sul target\\n<\/span>\\n          <\/p>\n<div class=\\\"uk-panel paragrafo testi-effect fm-reveal__para\\\"><strong>La qualit\u00e0 botanica, valorizzata dal processo.<\/strong>\\nTecniche, veicoli e parametri vengono selezionati in funzione del risultato da ottenere, per renderlo coerente con il target e con i requisiti industriali indicati dal cliente.<\/div>\n<p>\\n        <\/p><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/section>\n<p>\\n\\n<\/p>\n<style>\\n  \/* Palette (allineata al sito) e stato iniziale comune a fade opacity+blur.\\n     Le regole con :where(...) hanno specificita' zero: sono fallback per i\\n     test standalone, sul sito vincono sempre gli stili del tema. *\/\\n  .fm-reveal {\\n    --fm-bg: #DCE8E2;\\n    --fm-line-color: rgba(255, 255, 255, 0.48);\\n    height: 600vh;   \/* 4 step: intro + 3 cambi *\/\\n    position: relative;\\n    background: var(--fm-bg);\\n  }\\n\\n  .fm-reveal__sticky {\\n    position: sticky;\\n    top: 0;\\n    height: 100vh;\\n    display: flex;\\n    align-items: center;\\n    overflow: hidden;\\n  }\\n\\n  \/* ---------- Griglia ---------- *\/\\n  .fm-grid {\\n    position: absolute;\\n    inset: 0;\\n    display: flex;\\n    flex-direction: column;\\n    pointer-events: none;\\n  }\\n  .fm-grid__row { display: flex; }\\n  \/* Fasce alta\/bassa uguali, fascia media (video) ~15% piu' piccola *\/\\n  .fm-grid__row:nth-child(1) { height: 35%; }\\n  .fm-grid__row:nth-child(2) { height: 30%; }\\n  .fm-grid__row:nth-child(3) { height: 35%; }\\n\\n  \/* Cella: border-right = linea verticale. Height 0 -> 100% via GSAP. *\/\\n  .fm-grid__cell {\\n    width: 25%;\\n    height: 0%;\\n    background: var(--fm-bg);\\n    border-right: 1px solid var(--fm-line-color);\\n    will-change: height;\\n  }\\n  .fm-grid__cell:last-child { border-right: none; }\\n\\n  .fm-grid__hline {\\n    position: absolute;\\n    left: 0;\\n    width: 100%;\\n    height: 1px;\\n    background: var(--fm-line-color);\\n    opacity: 0;\\n  }\\n  .fm-grid__hline--1 { top: 35%; }\\n  .fm-grid__hline--2 { top: 65%; }\\n\\n  \/* ---------- Contenuto ---------- *\/\\n  .fm-reveal__row {\\n    position: relative;\\n    z-index: 2;                \/* sopra la griglia *\/\\n    width: 100%;\\n    height: 100%;\\n  }\\n\\n  \/* Tendina: seconda colonna (25% -> 50%) x fascia centrale (35% -> 65%).\\n     Width 0 iniziale, GSAP la porta a 25%; le immagini sotto hanno width\\n     fissa e vengono scoperte. La width esatta in px la imposta il JS. *\/\\n  .fm-reveal__media {\\n    position: absolute;\\n    left: 25%;\\n    top: 35%;\\n    height: 30%;\\n    width: 0;\\n    overflow: hidden;\\n    will-change: width;\\n  }\\n  \/* Immagini impilate: assolute dentro la tendina, tutte a width fissa\\n     (in px, scritta dal JS). La prima e' visibile, le altre entrano in\\n     crossfade via GSAP (autoAlpha). *\/\\n  .fm-reveal__img {\\n    position: absolute;\\n    left: 0;\\n    top: 0;\\n    display: block;\\n    width: 25vw;         \/* fallback, sovrascritto dal JS *\/\\n    max-width: none;     \/* alcuni temi WP mettono max-width:100% sui media *\/\\n    height: 100%;\\n    object-fit: cover;\\n  }\\n\\n  \/* Blocco titolo: in alto a sinistra, sopra la cella del video *\/\\n  .fm-reveal__title-block {\\n    position: absolute;\\n    left: 2.5vw;\\n    right: 2.5vw;\\n    top: 0;\\n    padding-top: 60px;\\n  }\\n\\n  \/* Eyebrow \\\"[ 01. ]\\\" \u2014 stile ereditato da .uk-h5.uk-text-primary del tema *\/\\n  .fm-reveal__eyebrow {\\n    font-weight: bold !important;\\n    opacity: 0;\\n    filter: blur(10px);\\n    will-change: filter, opacity;\\n  }\\n  :where(.fm-reveal__eyebrow) {\\n    font-family: 'Aptos', sans-serif;\\n    font-size: 15px;\\n    color: #277b67;\\n    width: 150px;\\n    margin-bottom: 10px;\\n  }\\n\\n  \/* Titolo \u2014 stile da .uk-heading-large del tema; qui colore + stato iniziale *\/\\n  .fm-reveal__title {\\n    margin: 0;\\n    color: #192b35 !important;\\n    opacity: 0;\\n  }\\n  :where(.fm-reveal__title) {\\n    font-family: 'Aptos-Light', 'Aptos', sans-serif;\\n    font-size: clamp(2.2rem, 4.4vw, 3.7rem);\\n    line-height: 1.1;\\n    font-weight: 300;\\n    letter-spacing: -0.046em;\\n  }\\n\\n  \/* Blocco paragrafo: dalla prima linea verticale al bordo destro,\\n     ancorato al fondo per centrarlo nella fascia bassa *\/\\n  .fm-reveal__para-block {\\n    position: absolute;\\n    left: 50%;                 \/* comincia dalla seconda linea verticale (colonna 3) *\/\\n    right: 2.5vw;\\n    bottom: 15vh;\\n    padding-left: 20px;        \/* respiro dalla linea verticale della griglia *\/\\n    display: grid;             \/* le slide si impilano nella stessa cella *\/\\n  }\\n\\n  \/* Slide di testo: tutte nella stessa cella grid, la piu' alta detta\\n     l'altezza del blocco cosi' il layout non salta ai cambi di step. *\/\\n  .fm-reveal__para-slide {\\n    grid-area: 1 \/ 1;\\n    display: flex;\\n    flex-direction: column;\\n    gap: 14px;\\n  }\\n   @media (min-width: 1440px) and (max-width: 1599px) {\\n .fm-reveal__para-block {\\n    position: absolute;\\n    left: 50%;  \\n      bottom: 10vh;\\n }\\n    }\\n@media screen and (max-width: 1200px){\\n .fm-reveal__para-block {\\n    position: absolute;\\n    left: 50%;  \\n      bottom: 10vh;\\n }\\n}\\n\\n  \/* Label-dot \\\"Il problema\\\" \u2014 stile ereditato da .label-dot del tema *\/\\n  .fm-reveal__label {\\n    opacity: 0;\\n    filter: blur(10px);\\n    will-change: filter, opacity;\\n  }\\n  :where(.fm-reveal__label) {\\n    display: flex;\\n    align-items: center;\\n    gap: 10px;\\n    font-family: 'Aptos', sans-serif;\\n    font-size: 15px;\\n    font-weight: 600;\\n    text-transform: uppercase;\\n    letter-spacing: 0.6px;\\n    color: #3e6f62;\\n  }\\n  :where(.fm-reveal__label)::before {\\n    content: '';\\n    display: inline-block;\\n    width: 9px;\\n    height: 9px;\\n    border-radius: 50%;\\n    background: #3e6f62;\\n  }\\n\\n  \/* Paragrafo \u2014 stile da .paragrafo del tema (Aptos 18\/1.5) *\/\\n  .fm-reveal__para {\\n    color: #192b35 !important;\\n    opacity: 0;\\n    filter: blur(10px);\\n    will-change: filter, opacity;\\n  }\\n  :where(.fm-reveal__para) {\\n    font-family: 'Aptos', sans-serif;\\n    font-size: 18px;\\n    line-height: 1.5;\\n    font-weight: 400;\\n  }\\n\\n  \/* Tablet: la tendina prende 2 colonne su 4 come da mobile. Il layout\\n     resta quello desktop (blocchi in absolute), cambia solo la larghezza.\\n     Questa width e' solo il fallback: quella reale in px la scrive il JS. *\/\\n  @media (min-width: 769px) and (max-width: 1200px) {\\n    .fm-reveal__img { width: 50vw; }\\n  }\\n\\n  \/* ---------- Mobile ----------\\n     Il contenuto esce dal posizionamento assoluto e va in flusso normale:\\n     titolo -> video -> paragrafo, impilati. Il paragrafo sta quindi sempre\\n     sotto al video ed e' allineato a sinistra come il titolo (6%). *\/\\n  @media (max-width: 768px) {\\n    .fm-reveal { height: 500vh; }  \/* 4 step *\/\\n\\n    \/* Su iOS 100vh include la zona dietro la barra del browser: con svh\\n       le fasce si calcolano sull'area davvero visibile (chi non supporta\\n       svh ignora la riga e tiene il 100vh della regola base). *\/\\n    .fm-reveal__sticky { height: 100svh; }\\n\\n    \/* Fasce ricalibrate: immagine piu' bassa e meta' schermo al testo,\\n       cosi' il paragrafo sale e resta leggibile anche coi testi lunghi. *\/\\n    .fm-grid__row:nth-child(1) { height: 30%; }\\n    .fm-grid__row:nth-child(2) { height: 20%; }\\n    .fm-grid__row:nth-child(3) { height: 50%; }\\n    .fm-grid__hline--1 { top: 30%; }\\n    .fm-grid__hline--2 { top: 50%; }\\n\\n    .fm-reveal__row {\\n      display: flex;\\n      flex-direction: column;\\n    }\\n    \/* border-box: senza, il flex-basis non conta il padding e la fascia\\n       del titolo sfora, sfasando il video rispetto alle linee della griglia. *\/\\n    .fm-reveal__title-block,\\n    .fm-reveal__media,\\n    .fm-reveal__para-block {\\n      box-sizing: border-box;\\n    }\\n\\n    \/* order: il titolo sta prima del video nel layout pur restando dopo\\n       nel markup (il markup non cambia, cosi' il desktop resta identico). *\/\\n    .fm-reveal__title-block {\\n      order: 1;\\n      position: relative;\\n      left: auto;\\n      right: auto;\\n      top: -20px;\\n      flex: 0 0 30%;\\n      padding: 40px 5% 0;\\n    }\\n\\n    .fm-reveal__media {\\n      order: 2;\\n      position: relative;   \/* in flusso, ma resta containing block delle img assolute *\/\\n      left: auto;\\n      top: auto;\\n      flex: 0 0 20%;\\n      height: 20%;\\n      align-self: flex-start;\\n      margin-left: 25%;        \/* resta agganciata alla prima linea verticale *\/\\n    }\\n    .fm-reveal__img { width: 50vw; }\\n\\n    \/* Non piu' absolute: sta nel flusso, subito dopo il video, e usa lo\\n       stesso inset orizzontale del blocco titolo. *\/\\n    .fm-reveal__para-block {\\n      order: 3;\\n      position: relative;\\n      left: auto;\\n      right: auto;\\n      bottom: auto;\\n      flex: 1 1 50%;\\n      min-height: 0;\\n      align-content: start;    \/* il testo parte subito sotto l'immagine *\/\\n      padding: 26px 2% 0 5%;\\n    }\\n\\n    :where(.fm-reveal__title) { font-size: clamp(1.4rem, 5.5vw, 2rem); }\\n    :where(.fm-reveal__para) { font-size: 16px; }\\n  }\\n<\/style>\n<p>\\n\\n<script>\\n(function () {\\n  'use strict';\\n\\n  var MEDIA_FRAC_DESKTOP = 0.25;   \/* 1 colonna su 4 *\/\\n  var MEDIA_FRAC_NARROW = 0.5;     \/* 2 colonne su 4: mobile E tablet *\/\\n  var NARROW_MQ = '(max-width: 1200px)';  \/* stessa soglia tablet del CSS *\/\\n  var BLUR_START = 10;\\n\\n  \/* GSAP dovrebbe esserci sempre grazie al plugin del tema. Come rete\\n     di sicurezza per l'apertura del file standalone, se dopo il load\\n     manca ancora, si carica da CDN. *\/\\n  var gsapLoading = false;\\n  function ensureGsap(done) {\\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') return done();\\n    if (document.readyState !== 'complete') {\\n      window.addEventListener('load', function () { ensureGsap(done); }, { once: true });\\n      return;\\n    }\\n    if (gsapLoading) return;\\n    gsapLoading = true;\\n    var base = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/';\\n    function load(src, next) {\\n      var s = document.createElement('script');\\n      s.src = base + src;\\n      s.onload = next;\\n      document.head.appendChild(s);\\n    }\\n    load('gsap.min.js', function () {\\n      load('ScrollTrigger.min.js', function () {\\n        load('SplitText.min.js', done);\\n      });\\n    });\\n  }\\n\\n  \/* Lenis: il tema ha gia' il suo raf loop, qui serve solo la\\n     sincronizzazione con ScrollTrigger. Se il tema espone window.lenis\\n     lo agganciamo; altrimenti scroll nativo. *\/\\n  function integrateLenis() {\\n    var lenis = window.lenis;\\n    if (!lenis || typeof lenis.on !== 'function') return window;\\n\\n    var wrapper = (lenis.options && lenis.options.wrapper) || window;\\n    var isWindowScroll = wrapper === window || wrapper === document.documentElement || wrapper === document.body;\\n\\n    if (isWindowScroll) {\\n      lenis.on('scroll', ScrollTrigger.update);\\n      return window;\\n    }\\n\\n    \/* Lenis su wrapper custom -> scrollerProxy *\/\\n    ScrollTrigger.scrollerProxy(wrapper, {\\n      scrollTop: function (value) {\\n        if (arguments.length) lenis.scrollTo(value, { immediate: true });\\n        return lenis.scroll || 0;\\n      },\\n      getBoundingClientRect: function () {\\n        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };\\n      },\\n      pinType: wrapper.style.transform ? 'transform' : 'fixed'\\n    });\\n    lenis.on('scroll', ScrollTrigger.update);\\n    ScrollTrigger.defaults({ scroller: wrapper });\\n    ScrollTrigger.refresh();\\n    return wrapper;\\n  }\\n\\n  \/* Effetto ry-blur sul titolo: SplitText per carattere, messa a fuoco\\n     da blur 10px con stagger casuale (identico ai titoli del sito).\\n     Ritorna la funzione da chiamare (una volta sola). *\/\\n  function makeTitleReveal(titleEl, allowBlur) {\\n    var fired = false;\\n    return function () {\\n      if (fired) return;\\n      fired = true;\\n\\n      if (typeof SplitText === 'undefined') {\\n        gsap.to(titleEl, { opacity: 1, duration: 0.8, ease: 'power2.out' });\\n        return;\\n      }\\n\\n      var chars = new SplitText(titleEl, { type: 'words, chars' }).chars;\\n      gsap.set(chars, allowBlur\\n        ? { opacity: 0, filter: 'blur(' + BLUR_START + 'px)', willChange: 'filter, opacity' }\\n        : { opacity: 0 });\\n      gsap.set(titleEl, { opacity: 1 });\\n\\n      gsap.to(chars, {\\n        opacity: 1,\\n        filter: allowBlur ? 'blur(0px)' : 'none',\\n        ease: 'power2.out',\\n        duration: 1,\\n        stagger: { amount: 0.3, from: 'random' },\\n        onComplete: function () {\\n          gsap.set(chars, { clearProps: 'filter,willChange' });\\n        }\\n      });\\n    };\\n  }\\n\\n  function init() {\\n    gsap.registerPlugin(ScrollTrigger);\\n    var scroller = integrateLenis();\\n\\n    \/* Larghezza finale della tendina = 1 colonna desktop, 2 su mobile.\\n       La width in px del video la calcoliamo dal contenitore reale\\n       (i vw includono la scrollbar e sfalserebbero l'incastro). *\/\\n    var isNarrow = window.matchMedia(NARROW_MQ).matches;\\n    var mediaFrac = isNarrow ? MEDIA_FRAC_NARROW : MEDIA_FRAC_DESKTOP;\\n    var rowEl = document.querySelector('.fm-reveal__row');\\n    var imgEls = gsap.utils.toArray('.fm-reveal__img');\\n    var slideEls = gsap.utils.toArray('.fm-reveal__para-slide');\\n\\n    function sizeMedia() {\\n      var w = (rowEl.clientWidth * mediaFrac) + 'px';\\n      imgEls.forEach(function (img) { img.style.width = w; });\\n    }\\n    sizeMedia();\\n\\n    var resizeTO;\\n    window.addEventListener('resize', function () {\\n      clearTimeout(resizeTO);\\n      resizeTO = setTimeout(sizeMedia, 100);\\n    });\\n\\n    \/* Stato iniziale degli step: visibili solo la prima immagine e la\\n       prima slide di testo (autoAlpha = opacity + visibility). *\/\\n    gsap.set(imgEls.slice(1), { autoAlpha: 0 });\\n    gsap.set(slideEls.slice(1), { autoAlpha: 0 });\\n\\n    \/* Timeline scrubbata: griglia -> tendina -> testi -> step 2..4 *\/\\n    var tl = gsap.timeline({\\n      scrollTrigger: {\\n        trigger: '.fm-reveal',\\n        scroller: scroller,\\n        start: 'top center',\\n        end: 'bottom bottom',\\n        scrub: 0.8\\n        \/* markers: true *\/\\n      }\\n    });\\n\\n    \/* Griglia: le linee verticali scendono colonna per colonna da destra *\/\\n    tl.to('.fm-grid__cell', {\\n      height: '100%',\\n      stagger: { each: 0.08, from: 'end', grid: [3, 4], axis: 'x' },\\n      ease: 'none',\\n      duration: 0.5\\n    }, 0);\\n\\n    \/* Linee orizzontali *\/\\n    tl.to('.fm-grid__hline', { opacity: 1, ease: 'none', duration: 0.3 }, 0.7);\\n\\n    \/* Eyebrow \\\"[ 01. ]\\\" (poco prima del titolo) *\/\\n    tl.to('.fm-reveal__eyebrow', { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.5 }, 1.0);\\n\\n    \/* Tendina: il wrapper si allarga scoprendo la prima immagine *\/\\n    tl.to('.fm-reveal__media', { width: (mediaFrac * 100) + '%', ease: 'none', duration: 1 }, 1.0);\\n\\n    \/* Titolo con ry-blur: time-based, una volta sola quando la tendina e' quasi aperta *\/\\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\\n    var allowBlur = !reduced && (navigator.deviceMemory ? navigator.deviceMemory >= 4 : true);\\n    var titleEl = document.querySelector('.fm-reveal__title');\\n    if (reduced) {\\n      gsap.set(titleEl, { opacity: 1 });\\n    } else {\\n      tl.call(makeTitleReveal(titleEl, allowBlur), [], 1.15);\\n    }\\n\\n    \/* Label-dot + paragrafo del primo step, con lo stesso fade\\n       opacity+blur di prima (scoped alla slide 1: le altre slide hanno\\n       le stesse classi e partono ai cambi di step). *\/\\n    tl.to(slideEls[0].querySelector('.fm-reveal__label'), { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.5 }, 1.4);\\n    tl.to(slideEls[0].querySelector('.fm-reveal__para'),  { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.6 }, 1.55);\\n\\n    \/* ---- Step 2..4: crossfade immagine + cambio testo ----\\n       Ogni step: pausa di lettura, poi il testo corrente esce, l'immagine\\n       successiva entra in crossfade (e' sopra nel DOM, quindi copre la\\n       precedente) e il nuovo testo appare con lo stesso fade opacity+blur\\n       del primo. Tutto scrubbato: tornando indietro si riavvolge. *\/\\n    var SWAP_START = 2.95;   \/* fine della pausa di lettura del primo testo *\/\\n    var SWAP_EVERY = 1.35;   \/* transizione + pausa di lettura di ogni step *\/\\n\\n    for (var i = 1; i < slideEls.length; i++) {\\n      var t = SWAP_START + (i - 1) * SWAP_EVERY;\\n\\n      \/* immagini: la successiva sfuma sopra, poi la vecchia si spegne *\/\\n      tl.to(imgEls[i],     { autoAlpha: 1, ease: 'none', duration: 0.5 }, t);\\n      tl.to(imgEls[i - 1], { autoAlpha: 0, ease: 'none', duration: 0.4 }, t + 0.15);\\n\\n      \/* testo: esce il vecchio, entra il nuovo *\/\\n      tl.to(slideEls[i - 1], { autoAlpha: 0, ease: 'none', duration: 0.35 }, t);\\n      tl.set(slideEls[i], { autoAlpha: 1 }, t + 0.35);\\n      tl.to(slideEls[i].querySelector('.fm-reveal__label'), { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.4 }, t + 0.4);\\n      tl.to(slideEls[i].querySelector('.fm-reveal__para'),  { opacity: 1, filter: 'blur(0px)', ease: 'none', duration: 0.5 }, t + 0.5);\\n    }\\n\\n    \/* Pausa finale: l'ultimo step resta visibile per l'ultimo tratto di scroll *\/\\n    tl.to({}, { duration: 0.8 });\\n  }\\n\\n  if (document.readyState === 'loading') {\\n    document.addEventListener('DOMContentLoaded', function () { ensureGsap(init); });\\n  } else {\\n    ensureGsap(init);\\n  }\\n})();\\n<\/script>\\n\"},\"name\":\"problema\"}]}]}]},{\"type\":\"section\",\"props\":{\"id\":\"piattaforma\",\"image_position\":\"center-center\",\"padding_bottom\":\"xsmall\",\"padding_top\":\"xsmall\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"}}]}],\"name\":\"id piattaforma\"},{\"type\":\"section\",\"props\":{\"class\":\"uk-visible@m\",\"height_viewport\":300,\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"20%\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 02. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"}},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"Un\u2019unica piattaforma.<br \/>\\nPi\u00f9 possibilit\u00e0 di risultato.\\n\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"position\":\"relative\",\"position_bottom\":\"30px\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}}]}],\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"remove\",\"width\":\"expand\"}},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"18% + 20vh\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"class\":\"card-1\",\"css\":\".el-element{\\n    min-height: 580px;\\n    background: #f5f7f4;\\n    display: flex;\\n  align-items: center;\\n  justify-content: center;\\n    padding: 40px;\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n  box-shadow:\\n    0 8px 12px rgba(0, 0, 0, 0),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\npadding-top:30px;\\n}\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"parallax_y\":\"6vh,0 30%\",\"position_top\":\"260px\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".el-column{\\n    position: relative;\\n}\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<style>\\n.rey-video-mask-seme {\\n  position: relative;\\n  display: block;\\n  width: 450px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-seme video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-seme::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-seme::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(245, 247, 244, 0) 50%,\\n      rgba(245, 247, 244, 1) 72%,\\n      rgba(245, 247, 244, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-seme\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-seme-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Selezione botanica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">La matrice vegetale viene individuata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:50px;\\n    left: 10px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\"><span class=\\\"ry-tooltip__title label-dot\\\">Origine controllata<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Origine e caratteristiche della materia prima vengono considerate per ridurre le variabili lungo il processo.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:210px;\\n    left: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n    position: absolute;\\n    top:210px;\\n    left: 300px;\\n    z-index: 3;\\n}\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    position: absolute;\\ntop:40px!important;\\n    left: 320px!important;\\n}\\n}\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Selezione botanica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:110px;\\n    left: 240px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n    position: absolute;\\ntop:110px;\\n    left: 400px;\\n    z-index: 3;\\n}\\n}\\n\/*\\n@media screen and (min-width: 768px) and (max-width: 1200px) { \\n.el-element{\\n    position: absolute;\\n    top:50px;\\n right: 50px;\\n}\\n}*\/\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Origine controllata<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOrigine e caratteristiche della materia prima vengono considerate per ridurre le\\nvariabili lungo il processo.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:230px;\\n    left: 10px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Sviluppo su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:300px;\\n    right: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n  position: absolute;\\n    top:300px;\\n    right: 210px;\\n    z-index: 3;\\n}\\n}\\n\/*\\n@media screen and (min-width: 768px) and (max-width: 1200px) { \\n.el-element{\\n    position: absolute;\\n    top:50px;\\n right: 50px;\\n}\\n}*\/\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Sviluppo su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto. <\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:130px;\\n    right: 10px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mobile\"}]},{\"type\":\"column\",\"props\":{\"css\":\"\/*.el-column{\\n    display: flex;\\n    justify-content: space-between;\\n    align-content: space-between;\\n    flex-wrap: wrap;\\n    flex-direction: column;\\n}*\/\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">LA PIATTAFORMA<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"il piataforma\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"headline\",\"props\":{\"content\":\"Seme\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"Ogni progetto parte dalla selezione della botanica pi\u00f9 coerente con il profilo e le\\nprestazioni richieste. La scelta non nasce da un catalogo predefinito, ma dall\u2019obiettivo\\ncondiviso con il cliente.\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"text_align\":\"left\"}}]}]}]}]}]}],\"name\":\"Seme desk\"}]}],\"props\":{\"class\":\"ry-card\",\"css\":\"@media screen and (min-width: 1200px){\\n.el-section{\\n    padding-left:40px;\\n    padding-right: 40px;\\n}\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"remove\"}},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"18% + 20vh\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"class\":\"card-2\",\"css\":\".el-element{\\n    background: #DCE8E2;\\n    padding: 40px;\\n      min-height: 580px;\\n    display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"position_top\":\"260px\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".el-column{\\n    position: relative;\\n}\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<style>\\n.rey-video-mask-col {\\n  position: relative;\\n  display: block;\\n  width: 500px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-col video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-col::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-col::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(220, 232, 226, 0) 50%,\\n      rgba(220, 232, 226, 1) 72%,\\n      rgba(220, 232, 226, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-col\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-coltivazione-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video desk\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Luce<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nSpettro e intensit\u00e0 vengono regolati in funzione delle fasi di sviluppo e del profilo\\ntarget.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:100px;\\n    left: 260px;\\n    z-index: 4;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:50px;\\n    left: 10px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips destra new\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Fertirrigazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nNutrienti e irrigazione vengono gestiti con precisione nelle diverse fasi di crescita.\\n<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:180px;\\n    right: 200px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:130px;\\n    right: 0;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  new\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Temperatura<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa temperatura viene controllata per ridurre la dipendenza da clima e stagionalit\u00e0 e favorire la ripetibilit\u00e0 della matrice botanica.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:360px;\\n    right: 320px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:200px;\\n    right: 10px;\\n    z-index: 4;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"temperatura deks\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Umidit\u00e0<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nL\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il\\nprofilo target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 290px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 40px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  4desk\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Umidit\u00e0<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">L\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il\\nprofilo target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 290px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:250px;\\n    right: 150px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  top mob\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">LA PIATTAFORMA<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"il piataforma\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"headline\",\"props\":{\"content\":\"Coltivazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"In ambiente controllato, luce, fertirrigazione, umidit\u00e0 e temperatura vengono gestite per favorire un profilo fitochimico coerente con il target e migliorare la ripetibilit\u00e0 tra i lotti. Una volta definito il protocollo agronomico, il profilo ottenuto diventa distintivo e riproducibile, offrendo al cliente un concreto elemento di differenziazione e innovazione.\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"text_align\":\"left\"}}]}]}]}]}]}],\"name\":\"Coltivazione\"}]}],\"props\":{\"class\":\"ry-card\",\"css\":\"@media screen and (min-width: 1200px){\\n.el-section{\\n    padding-left:40px;\\n    padding-right: 40px;\\n}\\n}\",\"margin_top\":\"default\"}},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"18% + 20vh\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"class\":\"card-3\",\"css\":\".el-element{\\n  min-height: 580px;\\n    background: #f5f7f4;\\n    display: flex;\\n  align-items: center;\\n  justify-content: center;\\n    padding: 40px;\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n  box-shadow:\\n    0 8px 12px rgba(0, 0, 0, 0),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"parallax_y\":\"6vh,0 30%\",\"position_top\":\"260px\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".el-column{\\n    position: relative;\\n}\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<style>\\n.rey-video-mask-seme {\\n  position: relative;\\n  display: block;\\n  width: 450px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-seme video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-seme::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-seme::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(245, 247, 244, 0) 50%,\\n      rgba(245, 247, 244, 1) 72%,\\n      rgba(245, 247, 244, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-seme\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-fresco-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video desk\"}]},{\"type\":\"column\",\"props\":{\"css\":\"\/*.el-column{\\n    display: flex;\\n    justify-content: space-between;\\n    align-content: space-between;\\n    flex-wrap: wrap;\\n    flex-direction: column;\\n}*\/\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">LA PIATTAFORMA<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"il piataforma\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"headline\",\"props\":{\"content\":\"Fresco\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"La botanica nella sua forma fresca.\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h4\"},\"name\":\"cifra \"},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"Materia botanica coltivata in ambiente controllato, con caratteristiche definite, ripetibili e tracciabili in funzione delle specifiche del progetto.\",\"margin_bottom\":\"default\",\"margin_top\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"text_align\":\"left\"}}]}]}]}]}]}],\"name\":\"fresco\"}]}],\"props\":{\"class\":\"ry-card\",\"css\":\"@media screen and (min-width: 1200px){\\n.el-section{\\n    padding-left:40px;\\n    padding-right: 40px;\\n}\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"18% + 20vh\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"class\":\"card-4\",\"css\":\".el-element{\\n    background: #DCE8E2;\\n    padding: 40px;\\n      min-height: 580px;\\n    display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"position_top\":\"260px\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".el-column{\\n    position: relative;\\n}\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<style>\\n.rey-video-mask-col {\\n  position: relative;\\n  display: block;\\n  width: 500px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-col video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-col::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-col::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(220, 232, 226, 0) 50%,\\n      rgba(220, 232, 226, 1) 72%,\\n      rgba(220, 232, 226, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-col\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-essicato-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video desk\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">LA PIATTAFORMA<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"il piataforma\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"headline\",\"props\":{\"content\":\"Essiccazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"La botanica essiccata attraverso un processo controllato.\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h4\"},\"name\":\"cifra \"},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"\\nL\u2019essiccazione a letto continuo, a temperatura controllata e con grado di essiccazione regolabile, consente di modulare le caratteristiche della matrice in funzione dell\u2019obiettivo del progetto.\",\"margin_bottom\":\"default\",\"margin_top\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"text_align\":\"left\"}}]}]}]}]}]}],\"name\":\"Essicato\"}]}],\"props\":{\"class\":\"ry-card\",\"css\":\"@media screen and (min-width: 1200px){\\n.el-section{\\n    padding-left:40px;\\n    padding-right: 40px;\\n}\\n}\",\"margin_top\":\"default\"}},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"18% + 20vh\",\"prevent_collapse\":false},\"children\":[{\"type\":\"fragment\",\"props\":{\"class\":\"card-5\",\"css\":\".el-element{\\n    min-height: 580px;\\n    background: #f5f7f4;\\n    display: flex;\\n  align-items: center;\\n  justify-content: center;\\n    padding: 40px;\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n  box-shadow:\\n    0 8px 12px rgba(0, 0, 0, 0),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"position_z_index\":\"3\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".el-column{\\n    position: relative;\\n}\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<style>\\n.rey-video-mask-seme {\\n  position: relative;\\n  display: block;\\n  width: 450px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-seme video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-seme::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-seme::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(245, 247, 244, 0) 50%,\\n      rgba(245, 247, 244, 1) 72%,\\n      rgba(245, 247, 244, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-seme\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-liquido-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video desk\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Tecniche selezionate<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:10px;\\n    left: 0px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\"><span class=\\\"ry-tooltip__title label-dot\\\">Tecniche selezionate<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:150px;\\n    left: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n    position: absolute;\\n    top:210px;\\n    left: 300px;\\n    z-index: 3;\\n}\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    position: absolute;\\ntop:40px!important;\\n    left: 320px!important;\\n}\\n}\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Veicoli dedicati<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:60px;\\n    left: 240px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n    position: absolute;\\ntop:110px;\\n    left: 400px;\\n    z-index: 3;\\n}\\n}\\n@media screen and (max-width: 1200px){\\n    .el-element{\\n    position: absolute;\\n    top:160px;\\n    left: 240px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Concentrazione e standardizzazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nIl processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:250px;\\n    right: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n  position: absolute;\\n    top:300px;\\n    right: 210px;\\n    z-index: 3;\\n}\\n}\\n\/*\\n@media screen and (min-width: 768px) and (max-width: 1200px) { \\n.el-element{\\n    position: absolute;\\n    top:50px;\\n right: 50px;\\n}\\n}*\/\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Veicoli dedicati<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa scelta del veicolo o del solvente \u00e8 parte integrante dello sviluppo. <\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:100px;\\n    right: 0px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mobile\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Concentrazione e standardizzazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 290px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:240px;\\n    left: 80px;\\n    z-index: 4;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips  top mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Formati su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:380px;\\n    right: 380px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    position: absolute;\\n    top:350px;\\n    right: 285px;\\n    z-index: 4;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips  top desk Formati\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Formati su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 290px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:200px;\\n    right: 85px;\\n    z-index: 4;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips  top mob Formati\"}]},{\"type\":\"column\",\"props\":{\"css\":\"\/*.el-column{\\n    display: flex;\\n    justify-content: space-between;\\n    align-content: space-between;\\n    flex-wrap: wrap;\\n    flex-direction: column;\\n}*\/\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"middle\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">LA PIATTAFORMA<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"il piataforma\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"headline\",\"props\":{\"content\":\"Estrazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"La botanica trasformata in ingrediente.\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h4\"},\"name\":\"cifra \"},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"\\nA partire da matrici botaniche fresche o essiccate, attraverso processi dedicati sviluppiamo estratti liquidi o in polvere, standardizzati in funzione delle specifiche del progetto.\",\"margin_bottom\":\"default\",\"margin_top\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"text_align\":\"left\"}}]}]}]}]}]}],\"name\":\"estrazione\"}]}],\"props\":{\"class\":\"ry-card\",\"css\":\"@media screen and (min-width: 1200px){\\n.el-section{\\n    padding-left:40px;\\n    padding-right: 40px;\\n}\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}],\"name\":\"piattaforma desk\"},{\"type\":\"section\",\"props\":{\"class\":\"uk-hidden@m\",\"id\":\"unica piattaforma\",\"image_position\":\"center-center\",\"padding_bottom\":\"small\",\"padding_top\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"s\",\"position_sticky_offset\":\"30%\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 01. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"Un\u2019unica piattaforma.<br \/>\\nPi\u00f9 possibilit\u00e0 di risultato.\\n\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"position\":\"relative\",\"position_bottom\":\"30px\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"css\":\".el-row{\\n    padding-left:5px;\\n    padding-right: 5px;\\n}\",\"layout\":\"1-5,1-5,1-5,1-5,1-5|1-2,1-2,1-3,1-3,1-3\",\"row_gap\":\"small\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"fade\",\"css\":\".el-element {\\n  position: relative;\\n  background: rgba(241, 244, 240);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.55);\\nbox-shadow: 8px 0 8px -6px rgba(229, 234, 227, 0.5);\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"\/ 01\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"LA PIATTAFORMA\\n\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-seme-mob2 {\\n  position: relative;\\n  display: block;\\n  width: 350px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-seme-mob2 video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-seme-mob2::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(241, 244, 240, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(241, 244, 240, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px; \\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-seme-mob2::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(241, 244, 240, 0) 50%,\\n      rgba(241, 244, 240, 1) 72%,\\n      rgba(241, 244, 240, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-seme-mob2\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/07\/video5-350p.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"}},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Selezione Botanica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:30%;  \\n    top:60px;\\n    z-index: 2;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:20px;\\n      top:80px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 1\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\"><span class=\\\"ry-tooltip__title label-dot\\\">Origine controllata<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Origine e caratteristiche della materia prima vengono considerate per ridurre le variabili lungo il processo.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:10%;  \\n    top:170px;\\n    z-index: 2;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:20px;\\n      top:280px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 2\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Sviluppo su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:70%;  \\n    top:240px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:90%;\\n      top:180px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 3\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Seme\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"Ogni progetto parte dalla selezione della botanica pi\u00f9 coerente con il profilo e le prestazioni richieste. La scelta non nasce da un catalogo predefinito, ma dall\u2019obiettivo condiviso con il cliente.\\n\",\"css\":\".el-element{\\n    padding-bottom: 20px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"seed\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"fade\",\"css\":\".el-element {\\n  position: relative;\\n  background: rgba(220, 232, 226);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.55);\\nbox-shadow: 8px 0 8px -6px rgba(229, 234, 227, 0.5);\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"\/ 02\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"LA PIATTAFORMA\\n\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-col-mob {\\n  position: relative;\\n  display: block;\\n  width: 300px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-col-mob video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-col-mob::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-col-mob::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(220, 232, 226, 0) 50%,\\n      rgba(220, 232, 226, 1) 72%,\\n      rgba(220, 232, 226, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-col-mob\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-coltivazione-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"}},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Luce<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nSpettro e intensit\u00e0 vengono regolati in funzione delle fasi di sviluppo e del profilo\\ntarget.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:30%;  \\n    top:60px;\\n    z-index: 2;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:20px;\\n      top:90px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 1\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Fertirrigazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nNutrienti e irrigazione vengono gestiti con precisione nelle diverse fasi di crescita.\\n<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    right:10%;  \\n    top:170px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    right:20px;\\n      top:180px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 2\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Umidit\u00e0<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nL\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il\\nprofilo target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    right:20%;  \\n    top:250px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    right:30px;\\n      top:260px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 3\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Temperatura<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa temperatura viene controllata per ridurre la dipendenza da clima e stagionalit\u00e0 e favorire la ripetibilit\u00e0 della matrice botanica.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:50%;  \\n    top:250px;\\n    z-index: 2;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:40%;\\n      top:260px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 4\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Coltivazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"\\nIn ambiente controllato, luce, fertirrigazione, umidit\u00e0 e temperatura vengono gestite per favorire un profilo fitochimico coerente con il target e migliorare la ripetibilit\u00e0 tra i lotti. Una volta definito il protocollo agronomico, il profilo ottenuto diventa distintivo e riproducibile, offrendo al cliente un concreto elemento di differenziazione e innovazione.\",\"css\":\".el-element{\\n    padding-bottom: 20px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"Cultivation\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"fade\",\"css\":\".el-element {\\n  position: relative;\\n  background: rgba(241, 244, 240);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  \\n  border: 1px solid rgba(255, 255, 255, 0.55);\\nbox-shadow: 8px 0 8px -6px rgba(229, 234, 227, 0.5);\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"\/ 03\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"LA PIATTAFORMA\\n\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-fresco {\\n  position: relative;\\n  display: block;\\n  width: 350px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-fresco video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-fresco::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(241, 244, 240, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(241, 244, 240, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-fresco::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(241, 244, 240, 0) 50%,\\n      rgba(241, 244, 240, 1) 72%,\\n      rgba(241, 244, 240, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-fresco\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-fresco-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"}}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Fresco\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<p><strong>La botanica nella sua forma fresca.<\/strong><br \/>Materia botanica coltivata in ambiente controllato, con caratteristiche definite, ripetibili e tracciabili in funzione delle specifiche del progetto.<\/p>\n<p>\",\"css\":\".el-element{\\n    padding-bottom: 20px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"fresh\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"fade\",\"css\":\".el-element {\\n  position: relative;\\n  background: rgba(220, 232, 226);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.55);\\nbox-shadow: 8px 0 8px -6px rgba(229, 234, 227, 0.5);\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"\/ 04\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"LA PIATTAFORMA\\n\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-essicato {\\n  position: relative;\\n  display: block;\\n  width: 300px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-essicato video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-essicato::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-essicato::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(220, 232, 226, 0) 50%,\\n      rgba(220, 232, 226, 1) 72%,\\n      rgba(220, 232, 226, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-essicato\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-essicato-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"}}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Essiccazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<p><strong>La botanica essiccata attraverso un processo controllato.<\/strong><br \/>L\u2019essiccazione a letto continuo, a temperatura controllata e con grado di essiccazione regolabile, consente di modulare le caratteristiche della matrice in funzione dell\u2019obiettivo del progetto.<\/p>\n<p>\",\"css\":\".el-element{\\n    padding-bottom: 20px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"Drying\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"fade\",\"css\":\".el-element {\\n  position: relative;\\n background: rgba(241, 244, 240);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n  box-shadow:\\n    0 8px 32px rgba(0, 0, 0, 0.02),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"\/ 05\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"LA PIATTAFORMA\\n\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-estrato {\\n  position: relative;\\n  display: block;\\n  width: 350px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-estrato video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-estrato::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-estrato::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(241, 244, 240, 0) 50%,\\n      rgba(241, 244, 240, 1) 72%,\\n      rgba(241, 244, 240, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-estrato\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-liquido-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"}},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Veicoli dedicati<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:30%;  \\n    top:60px;\\n    z-index: 2;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:20px;\\n      top:90px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 1\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Tecniche selezionate<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nIl metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.\\n<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    right:10%;  \\n    top:170px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    right:20px;\\n      top:180px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 2\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Concentrazione e standardizzazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nIl processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    right:20%;  \\n    top:250px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    right:30px;\\n      top:260px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 3\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@m\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Formati su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n  position: absolute;\\n    left:50%;  \\n    top:250px;\\n    z-index: 2;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    left:40%;\\n      top:260px;\\n}\\n}\",\"position_left\":\"20%\",\"position_top\":\"40px\",\"position_z_index\":\"3\"},\"name\":\"tooltips 4\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Estrazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"},\"name\":\"Extraction\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<p><strong>La botanica trasformata in ingrediente.<\/strong><br \/>A partire da matrici botaniche fresche o essiccate, attraverso processi dedicati sviluppiamo estratti liquidi o in polvere, standardizzati in funzione delle specifiche del progetto.<\/p>\n<p>\",\"css\":\".el-element{\\n    padding-bottom: 20px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"Cultivation\"}]}]}],\"name\":\"piattaforma mob e tab en\"},{\"type\":\"section\",\"props\":{\"animation\":\"fade\",\"class\":\"uk-hidden@m\",\"css\":\".el-section{\\n    padding-left: 5px;\\n    padding-right: 5px;\\n}\",\"image_position\":\"center-center\",\"padding_bottom\":\"small\",\"padding_top\":\"large\",\"status\":\"disabled\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"s\",\"position_sticky_offset\":\"30%\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 02. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"}},{\"type\":\"headline\",\"props\":{\"content\":\"Un\u2019unica piattaforma.<br \/>\\nPi\u00f9 possibilit\u00e0 di risultato.\\n\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"position\":\"relative\",\"position_bottom\":\"30px\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}}]}],\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"}},{\"type\":\"row\",\"props\":{\"class\":\"uk-hidden@m\",\"css\":\"@media (min-width: 960px) {\\n\\t.el-row {\\n        margin-top: -100vh;\\n        height: 100vh;\\n    }\\n}\",\"layout\":\"1-5,1-5,1-5,1-5,1-5|1-2,1-2,1-3,1-3,1-3\",\"margin_top\":\"small\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"css\":\".el-element{\\n    position: relative;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"status\":\"disabled\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"content\":\"\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    padding-top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n}\\n\\n\",\"height_expand\":false,\"image\":\"\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 01 <span> LA PIATTAFORMA <\/span> \",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title\":\"\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-small\"},\"name\":\"slider card\"}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"collapse\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"\/ 01\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"LA PIATTAFORMA\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position\":\"relative\",\"position_top\":\"15\",\"position_z_index\":\"3\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"numero [ ]\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-seme-mob2 {\\n  position: relative;\\n  display: block;\\n  width: 350px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-seme-mob2 video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-seme-mob2::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 1;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(241, 244, 240, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(241, 244, 240, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px; \\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-seme-mob2::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(241, 244, 240, 0) 50%,\\n      rgba(241, 244, 240, 1) 72%,\\n      rgba(241, 244, 240, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-seme-mob2\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/07\/video5-350p.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video mob\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Selezione botanica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">La matrice vegetale viene individuata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:80px;\\n    left: 10px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\"><span class=\\\"ry-tooltip__title label-dot\\\">Origine controllata<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Origine e caratteristiche della materia prima vengono considerate per ridurre le variabili lungo il processo.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\ntop:90px!important;\\n    left: 320px!important;\\n    z-index:3;\\n}\\n\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Selezione botanica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:190px;\\n    left: 200px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Origine controllata<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOrigine e caratteristiche della materia prima vengono considerate per ridurre le\\nvariabili lungo il processo.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:280px;\\n    left: 10px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Sviluppo su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:300px;\\n    right: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n  position: absolute;\\n    top:300px;\\n    right: 210px;\\n    z-index: 3;\\n}\\n}\\n\/*\\n@media screen and (min-width: 768px) and (max-width: 1200px) { \\n.el-element{\\n    position: absolute;\\n    top:50px;\\n right: 50px;\\n}\\n}*\/\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Sviluppo su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nOgni scelta viene orientata dalle esigenze tecniche e industriali del progetto. <\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:160px;\\n    right: 10px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mobile\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Seme\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"Ogni progetto parte dalla selezione della botanica pi\u00f9 coerente con il profilo e le prestazioni richieste. La scelta non nasce da un catalogo predefinito, ma dall\u2019obiettivo condiviso con il cliente.\",\"css\":\".el-element{\\n    padding-bottom: 15px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"seme\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel\",\"css\":\".el-element{\\n    background-color: rgb(220, 232, 226);\\n}\\n.el-element{\\n    position: relative;\\n\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"content\":\"\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    padding-top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n}\\n\\n\",\"height_expand\":false,\"image\":\"\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 02 <span> LA PIATTAFORMA <\/span> \",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title\":\"\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-small\"},\"name\":\"slider card\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-col-mob {\\n  position: relative;\\n  display: block;\\n  width: 300px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-col-mob video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-col-mob::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-col-mob::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(220, 232, 226, 0) 50%,\\n      rgba(220, 232, 226, 1) 72%,\\n      rgba(220, 232, 226, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-col-mob\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-coltivazione-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video mob\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Luce<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nSpettro e intensit\u00e0 vengono regolati in funzione delle fasi di sviluppo e del profilo\\ntarget.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:100px;\\n    left: 260px;\\n    z-index: 4;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:50px;\\n    left: 10px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips destra new\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Fertirrigazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nNutrienti e irrigazione vengono gestiti con precisione nelle diverse fasi di crescita.\\n<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:180px;\\n    right: 200px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:130px;\\n    right: 0;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  new\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Umidit\u00e0<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nL\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il\\nprofilo target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 290px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 40px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  4desk\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Temperatura<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">La temperatura viene controllata per ridurre la dipendenza da clima e stagionalit\u00e0 e favorire la ripetibilit\u00e0 della matrice botanica.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:290px;\\n    right: 200px;\\n    z-index: 5;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:280px;\\n    right: 200px;\\n    z-index: 5;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  top\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Umidit\u00e0<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">L\u2019umidit\u00e0 viene gestita per mantenere condizioni di coltivazione coerenti con il\\nprofilo target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:260px;\\n    right: 290px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 576px) {\\n.el-element{\\n    position: absolute;\\n    top:250px;\\n    right: 150px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  top mob\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Coltivazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"\\nIn ambiente controllato, luce, fertirrigazione, umidit\u00e0 e temperatura vengono gestite per favorire un profilo fitochimico coerente con il target e migliorare la ripetibilit\u00e0 tra i lotti. Una volta definito il protocollo agronomico, il profilo ottenuto diventa distintivo e riproducibile, offrendo al cliente un concreto elemento di differenziazione e innovazione.\",\"css\":\".el-element{\\n    padding-bottom: 15px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"Coltivazione\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"css\":\".el-element{\\n    position: relative;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"content\":\"\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    padding-top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n}\\n\\n\",\"height_expand\":false,\"image\":\"\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 03 <span> LA PIATTAFORMA <\/span> \",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title\":\"\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-small\"},\"name\":\"slider card\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-fresco {\\n  position: relative;\\n  display: block;\\n  width: 350px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-fresco video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-fresco::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(241, 244, 240, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(241, 244, 240, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-fresco::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(241, 244, 240, 0) 50%,\\n      rgba(241, 244, 240, 1) 72%,\\n      rgba(241, 244, 240, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-fresco\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-fresco-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video mob\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Fresco\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<p><strong>La botanica nella sua forma fresca.<\/strong><br \/>Materia botanica coltivata in ambiente controllato, con caratteristiche definite, ripetibili e tracciabili in funzione delle specifiche del progetto.<\/p>\n<p>\",\"css\":\".el-element{\\n    padding-bottom: 15px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"fresco\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel\",\"css\":\".el-element{\\n    background-color: rgb(220, 232, 226);\\n}\\n.el-element{\\n    position: relative;\\n\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"content\":\"\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    padding-top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n}\\n\\n\",\"height_expand\":false,\"image\":\"\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 04 <span> LA PIATTAFORMA <\/span> \",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title\":\"\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-small\"},\"name\":\"slider card\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-essicato {\\n  position: relative;\\n  display: block;\\n  width: 300px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-essicato video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-essicato::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(255, 255, 255, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(255, 255, 255, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-essicato::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(220, 232, 226, 0) 50%,\\n      rgba(220, 232, 226, 1) 72%,\\n      rgba(220, 232, 226, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-essicato\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-essicato-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video mob\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Essiccazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<p><strong>La botanica essiccata attraverso un processo controllato.<\/strong> <br \/>L\u2019essiccazione a letto continuo, a temperatura controllata e con grado di essiccazione regolabile, consente di modulare le caratteristiche della matrice in funzione dell\u2019obiettivo del progetto.<\/p>\n<p>\",\"css\":\".el-element{\\n    padding-bottom: 15px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"Essiccazione\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"50vh - 50%\",\"width_medium\":\"1-5\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"css\":\".el-element{\\n    position: relative;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"content\":\"\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    padding-top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n}\\n\\n\",\"height_expand\":false,\"image\":\"\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 05 <span> LA PIATTAFORMA <\/span> \",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"position_top\":\"15px\",\"position_z_index\":\"3\",\"title\":\"\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"heading-small\"},\"name\":\"slider card\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n.rey-video-mask-estrato {\\n  position: relative;\\n  display: block;\\n  width: 350px;\\n  max-width: 100%;\\n  margin: 0 auto;\\n  aspect-ratio: 1 \/ 1;\\n  overflow: hidden;\\n  line-height: 0;\\n}\\n\\n.rey-video-mask-estrato video {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n}\\n\\n\/* PATTERN a quadretti \u2014 sopra il video, visibile nella fascia intermedia *\/\\n.rey-video-mask-estrato::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 2;\\n  pointer-events: none;\\n\\n  \/* griglia: due linee sottili verdi semi-trasparenti *\/\\n  background-image:\\n    linear-gradient(to right,  rgba(245, 247, 244, 0.48) 1px, transparent 1px),\\n    linear-gradient(to bottom, rgba(245, 247, 244, 0.48) 1px, transparent 1px);\\n  background-size: 90px 90px;   \/* dimensione dei quadretti *\/\\n\\n  \/* maschera ad anello: trasparente al centro, piena a met\u00e0 raggio, sfuma ai bordi *\/\\n  -webkit-mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n          mask: radial-gradient(circle at center,\\n      transparent 30%,\\n      #000 50%,\\n      #000 62%,\\n      transparent 85%);\\n}\\n\\n\/* MASCHERA colore \u2014 sfuma gli angoli del video nel background (ripulita) *\/\\n.rey-video-mask-estrato::after {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 3;\\n  pointer-events: none;\\n  background: radial-gradient(circle at center,\\n      rgba(241, 244, 240, 0) 50%,\\n      rgba(241, 244, 240, 1) 72%,\\n      rgba(241, 244, 240, 1) 100%);\\n}\\n<\/style>\n<p>\\n\\n<\/p>\n<div class=\\\"rey-video-mask-estrato\\\">\\n  <video \\n    src=\\\"\/wp-content\/uploads\/2026\/08\/video-liquido-500.mp4\\\"\\n    autoplay loop muted playsinline preload=\\\"auto\\\"><\/video>\\n<\/div>\n<p>\"},\"name\":\"video mob\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Tecniche selezionate<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:75px;\\n    left: 15px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\"><span class=\\\"ry-tooltip__title label-dot\\\">Tecniche selezionate<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il metodo viene selezionato in funzione della matrice e dell'obiettivo del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:150px;\\n    left: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n    position: absolute;\\n    top:210px;\\n    left: 300px;\\n    z-index: 3;\\n}\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    position: absolute;\\ntop:40px!important;\\n    left: 320px!important;\\n}\\n}\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip>\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Veicoli dedicati<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa matrice vegetale viene selezionata in funzione del target da raggiungere.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:60px;\\n    left: 240px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n    position: absolute;\\ntop:110px;\\n    left: 400px;\\n    z-index: 3;\\n}\\n}\\n@media screen and (max-width: 1200px){\\n    .el-element{\\n    position: absolute;\\n    top:160px;\\n    left: 240px;\\n    z-index: 3;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"destra new desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Concentrazione e standardizzazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nIl processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:250px;\\n    right: 160px;\\n    z-index: 3;\\n}\\n@media (min-width: 1827px){\\n .el-element{\\n  position: absolute;\\n    top:300px;\\n    right: 210px;\\n    z-index: 3;\\n}\\n}\\n\/*\\n@media screen and (min-width: 768px) and (max-width: 1200px) { \\n.el-element{\\n    position: absolute;\\n    top:50px;\\n right: 50px;\\n}\\n}*\/\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips sinistra  desk e tab\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"left\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Veicoli dedicati<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">\\nLa scelta del veicolo o del solvente \u00e8 parte integrante dello sviluppo. <\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:160px;\\n    right: 0px;\\n    z-index: 3;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"mobile\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Concentrazione e standardizzazione<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo \u00e8 definito per concentrare e standardizzare le componenti rilevanti per il target.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\"\\n.el-element{\\n    position: absolute;\\n    top:260px;\\n    left: 100px;\\n    z-index: 4;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips  top mob\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-visible@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Formati su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\".el-element{\\n    position: absolute;\\n    top:380px;\\n    right: 380px;\\n    z-index: 3;\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    position: absolute;\\n    top:350px;\\n    right: 285px;\\n    z-index: 4;\\n}\\n}\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips  top desk Formati\"},{\"type\":\"html\",\"props\":{\"class\":\"uk-hidden@s\",\"content\":\"<\/p>\n<div class=\\\"ry-tooltip ry-tooltip--glass ry-tooltip--glass-circle ry-tooltip--pulse\\\" data-tooltip data-tooltip-position=\\\"up\\\">\\n  <button class=\\\"ry-tooltip__trigger\\\" type=\\\"button\\\" aria-expanded=\\\"false\\\">\\n    <span class=\\\"ry-tooltip__icon\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/button>\\n  <\/p>\n<div class=\\\"ry-tooltip__panel\\\" role=\\\"tooltip\\\">\\n    <span class=\\\"ry-tooltip__line\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <\/p>\n<div class=\\\"ry-tooltip__text\\\">\\n      <span class=\\\"ry-tooltip__title label-dot\\\">Formati su specifica<\/span>\\n      <span class=\\\"ry-tooltip__desc\\\">Il processo pu\u00f2 generare ingredienti liquidi, in polvere o in altri formati solidi, secondo le esigenze del progetto.<\/span>\\n    <\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n<\/p><\/div>\n<p>\",\"css\":\"\\n.el-element{\\n    position: absolute;\\n    top:300px;\\n    right: 85px;\\n    z-index: 4;\\n}\\n\",\"position_right\":\"0\",\"position_top\":\"0\",\"position_z_index\":\"3\"},\"name\":\"tooltips  top mob Formati\"}]}]},{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"content\":\"Estrazione\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"title_element\":\"h3\",\"title_style\":\"heading-small\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"text\",\"props\":{\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"<\/p>\n<p><strong>La botanica trasformata in ingrediente.<\/strong><br \/>A partire da matrici botaniche fresche o essiccate, attraverso processi dedicati sviluppiamo estratti liquidi o in polvere, standardizzati in funzione delle specifiche del progetto.<\/p>\n<p>\",\"css\":\".el-element{\\n    padding-bottom: 15px;\\n}\",\"margin_bottom\":\"default\",\"margin_top\":\"default\"}}]}]}],\"name\":\"Estrazione\"}]}]}],\"name\":\"piattaforma mob\"},{\"type\":\"section\",\"props\":{\"class\":\"uk-visible@s\",\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"}}]}]},{\"type\":\"section\",\"props\":{\"id\":\"output\",\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"parallax_easing\":\"0\",\"parallax_scale\":\"0.9,1 25%\",\"parallax_y\":\"15vh,0 30%\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".uk-background-cover{\\n    border-radius: 0px;\\n}\\n.uk-card-default{\\n      border-radius: 0px; \\n    transition: ease-in-out 0.5s;\\n}\\n\/*\\n.uk-card-default:hover{\\n      border-top-left-radius: 0px; \\n      border-top-right-radius: 0px; \\n}*\/\",\"image_effect\":\"parallax\",\"image_parallax_bgy\":\"-10vh,10vh\",\"image_parallax_easing\":\"0\",\"image_position\":\"top-center\",\"image_size\":\"cover\",\"media_focal_point\":\"top-center\",\"padding\":\"none\",\"position_sticky_breakpoint\":\"m\",\"style\":\"card-default\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"css\":\".el-element{\\n    padding-top: 110px;\\n    padding-bottom: 70px;\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    padding-top: 70px;\\n}\\n}\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"class\":\"uk-visible@m\",\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"desk\"},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">IL RISULTATO<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"desk\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 03. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"cifra \"},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"Output della filiera.\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\",\"margin_top\":\"default\",\"visibility\":\"hidden-m\"},\"name\":\"tab e mob\"},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">IL RISULTATO<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\",\"visibility\":\"hidden-m\"},\"name\":\"tab e mob\"},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo testi-effect\",\"column_breakpoint\":\"m\",\"content\":\"Reytera porta la materia botanica nel formato pi\u00f9 coerente con il processo del cliente.\\nOutput diversi, sviluppati per integrarsi in formulazioni, applicazioni e processi industriali\\ndifferenti.\",\"margin_bottom\":\"default\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\"}}]}]},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"panel-slider\",\"props\":{\"class\":\"ry-glass-slider\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-item{\\n    position: relative;\\n}\\n\\n.uk-slidenav-container.uk-position-top-right{\\n   background: rgba(255, 255, 255, 0.12);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n    border-radius:20px;\\n  margin-right:8px;\\n    margin-top:-38px;\\n}\\n.uk-slidenav-container.uk-position-top-right svg{\\n    color:#f1f4f0;\\n}\\n\",\"image_align\":\"top\",\"image_expand\":true,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"medium\",\"margin_top\":\"default\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"nav\":\"\",\"nav_align\":\"center\",\"nav_breakpoint\":\"s\",\"panel_card_offset\":true,\"panel_image_no_padding\":true,\"panel_match\":true,\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"show_content\":true,\"show_hover_image\":true,\"show_hover_video\":true,\"show_image\":true,\"show_link\":false,\"show_meta\":true,\"show_title\":true,\"show_video\":true,\"slidenav\":\"top-right\",\"slidenav_breakpoint\":\"\",\"slidenav_margin\":\"small\",\"slidenav_outside_breakpoint\":\"xl\",\"slider_autoplay_pause\":true,\"slider_center\":false,\"slider_finite\":false,\"slider_gap\":\"small\",\"slider_width\":\"fixed\",\"slider_width_default\":\"1-1\",\"slider_width_medium\":\"1-4\",\"slider_width_small\":\"1-2\",\"status\":\"disabled\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\"},\"children\":[{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\"image\":\"\",\"meta\":\"01.\",\"title\":\"Soluzione\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\"image\":\"\",\"meta\":\"02.\",\"title\":\"Soluzione\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"\",\"image\":\"wp-content\/uploads\/2026\/07\/reytera-bg2.jpg\",\"meta\":\"\",\"title\":\"\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\",\"image\":\"\",\"meta\":\"04.\",\"title\":\"Soluzione\"}}],\"name\":\"slider\"},{\"type\":\"panel-slider\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo-card\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-item{\\n      position: relative;\\n  background: rgba(241, 244, 240, 0.72);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n  box-shadow:\\n    0 8px 32px rgba(0, 0, 0, 0.02),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\\n@media (hover: hover) and (pointer: fine) {\\n.el-item:hover {\\n    transform: translateY(-8px);\\n    \/*border-radius: 34px;*\/\\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10),\\n                inset 1px 1px 1px rgba(255, 255, 255, 0.1);\\n  }\\n}\\n.el-meta{\\n    font-size: 13px;\\n    padding: 2px 15px;\\n    border-radius: 20px;\\n    position: absolute;\\n    top:10px;\\n    right: 10px;\\n    background: rgba(220, 232, 226, 0.92);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(143, 169, 155, 0.09);\\n}\\n.uk-slidenav-container.uk-position-top-right{\\n   background: rgba(255, 255, 255, 0.52);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.25);\\n    border-radius:20px;\\n  margin-right:8px;\\n    margin-top:-38px;\\n}\\n.uk-slidenav-container.uk-position-top-right svg{\\n    color:#192B35;\\n}\\n@media screen and (max-width: 1200px){\\n.el-element{\\n    padding-top:30px;\\n}\\n    .uk-slidenav-container.uk-position-top-right{\\npadding: 2px 5px;\\n          margin-top:-42px;\\n        margin-right:4px;\\n    }\\n    .uk-slidenav-container.uk-position-top-right svg{\\n width: 8px;\\n}\\n}\",\"image_align\":\"top\",\"image_expand\":true,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"nav\":\"\",\"nav_align\":\"center\",\"nav_breakpoint\":\"s\",\"panel_card_offset\":true,\"panel_image_no_padding\":false,\"panel_match\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"show_content\":true,\"show_hover_image\":true,\"show_hover_video\":true,\"show_image\":true,\"show_link\":false,\"show_meta\":true,\"show_title\":true,\"show_video\":true,\"slidenav\":\"top-right\",\"slidenav_breakpoint\":\"\",\"slidenav_margin\":\"small\",\"slidenav_outside_breakpoint\":\"xl\",\"slider_autoplay_pause\":true,\"slider_center\":false,\"slider_finite\":false,\"slider_gap\":\"small\",\"slider_width\":\"fixed\",\"slider_width_default\":\"1-1\",\"slider_width_large\":\"1-4\",\"slider_width_medium\":\"1-3\",\"slider_width_small\":\"1-2\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h2\"},\"children\":[{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Un estratto concentrato e titolato, ottenuto attraverso processi dedicati e standardizzato in\\nforma stabile secondo le specifiche del progetto.\",\"image\":\"wp-content\/uploads\/2026\/08\/estratto-polvere-reytera-1.jpg\",\"meta\":\"OUTPUT FINALE\",\"title\":\"Estratto in polvere\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Un estratto ottenuto attraverso tecniche e veicoli selezionati in funzione della botanica, del profilo richiesto e delle specifiche del progetto.\",\"image\":\"wp-content\/uploads\/2026\/08\/Oil_droplets_in_liquid_suspension_202608061245-1-1-1.jpg\",\"meta\":\"OUTPUT FINALE\",\"title\":\"Estratto liquido\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Frazioni aromatiche concentrate, ottenute attraverso processi dedicati per preservare e\\nvalorizzare il profilo caratteristico della botanica.\",\"image\":\"wp-content\/uploads\/2026\/08\/olio-essenziali-reytera-1.jpg\",\"meta\":\"OUTPUT FINALE\",\"title\":\"Oli essenziali e assolute\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Materia botanica fresca, coltivata in ambiente controllato, tracciabile e caratterizzata\\nsecondo le specifiche del progetto.\",\"image\":\"wp-content\/uploads\/2026\/08\/output-fresco-reytera.jpg\",\"meta\":\"OUTPUT FINALE\",\"title\":\"Fresco\"}},{\"type\":\"panel-slider_item\",\"props\":{\"content\":\"Materia botanica essiccata a letto continuo, a temperatura controllata e con grado di\\nessiccazione regolabile in funzione delle specifiche del progetto.\",\"image\":\"wp-content\/uploads\/2026\/08\/essicato-reytera-output-_1_.webp\",\"meta\":\"OUTPUT FINALE\",\"title\":\"Essiccato\"}}],\"name\":\"slider\"}]}],\"props\":{\"margin_top\":\"medium\",\"width\":\"expand\"}},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"}}]}],\"props\":{\"width\":\"expand\"}},{\"type\":\"row\",\"props\":{\"class\":\"uk-visible@s\",\"layout\":\"1-2,1-2\",\"margin_top\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"DALLA STESSA FILIERA\",\"css\":\".el-element{\\n    text-transform: uppercase;\\n    font-size: 15px;\\n    font-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"parallax_blur\":\"10,0 20%\",\"parallax_easing\":\"-0.5\",\"parallax_opacity\":\"0,1 20%\",\"parallax_transform_origin\":\"bottom-center\",\"title_element\":\"h5\",\"title_style\":\"h5\"},\"name\":\"desk\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"UN'UNICA PIATTAFORMA\",\"css\":\".el-element{\\n    text-transform: uppercase;\\n    font-size: 15px;\\n    font-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"parallax_blur\":\"10,0 20%\",\"parallax_easing\":\"-0.5\",\"parallax_opacity\":\"0,1 20%\",\"parallax_transform_origin\":\"bottom-center\",\"text_align\":\"right\",\"title_element\":\"h5\",\"title_style\":\"h5\"},\"name\":\"desk\"}]}]},{\"type\":\"row\",\"props\":{\"class\":\"uk-hidden@s\",\"layout\":\"1-2,1-2\",\"margin_top\":\"small\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"UN'UNICA\",\"css\":\".el-element{\\n    text-transform: uppercase;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"parallax_blur\":\"10,0 20%\",\"parallax_easing\":\"-0.5\",\"parallax_opacity\":\"0,1 20%\",\"parallax_transform_origin\":\"bottom-center\",\"title_element\":\"h5\"},\"name\":\"mob\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"PIATTAFORMA\",\"css\":\".el-element{\\n    text-transform: uppercase;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"parallax_blur\":\"10,0 20%\",\"parallax_easing\":\"-0.5\",\"parallax_opacity\":\"0,1 20%\",\"parallax_transform_origin\":\"bottom-center\",\"text_align\":\"right\",\"title_element\":\"h5\"},\"name\":\"mob\"}]}]}]}]}]}]}]}]}],\"name\":\"output\"},{\"type\":\"section\",\"props\":{\"animation_delay\":\"200\",\"css\":\".el-section{\\n    border-radius: 20px;\\n}\",\"image_position\":\"center-center\",\"padding_bottom\":\"large\",\"padding_top\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"expand\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 04. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position_bottom\":\"30px\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"cifra \"},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"Tre criteri per trasformare<br class=\\\"uk-visible@m\\\">\\n la botanica in valore industriale.\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}}]}]},{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"}},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">I TRE PILASTRI\\n<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"small \"},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo testi-effect\",\"column_breakpoint\":\"m\",\"content\":\"Ogni progetto integra performance, compliance e sostenibilit\u00e0: <br class=\\\"uk-visible@xl\\\">tre criteri complementari\\nper sviluppare output affidabili, utilizzabili e coerenti con i requisiti industriali.\",\"margin_bottom\":\"default\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\"}}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-4,1-4,1-4,1-4|1-2,1-2,1-2,1-2\",\"margin_top\":\"large\",\"row_gap\":\"small\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo-card\",\"content\":\"<\/p>\n<p><strong>Prestazioni costruite sulle specifiche del progetto.<\/strong><br \/>Standardizzazione produttiva, sviluppo su specifica, titolazione e caratterizzazione chimica consentono di ottenere output coerenti con i parametri definiti e, quando previsto, di\\nvalutarne le performance attraverso test dedicati in vitro e in vivo.<\/p>\n<p>\",\"content_column_breakpoint\":\"m\",\"content_margin_auto\":false,\"css\":\"\\n.el-element{\\n   position: relative;\\n background: rgba(220, 232, 226, 0.92);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.55);\\n  box-shadow:\\n    0 8px 32px rgba(0, 0, 0, 0.02),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\\n\",\"height_expand\":true,\"image\":\"wp-content\/uploads\/2026\/07\/linktree-logo-light.svg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_animate\":true,\"image_svg_color\":\"primary\",\"image_svg_inline\":true,\"image_width\":50,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":false,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title\":\"Performance\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"large\",\"title_style\":\"h2\"},\"name\":\"grid muted con icon\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo-card\",\"content\":\"<\/p>\n<p><strong>Conformit\u00e0 lungo tutto il processo.<\/strong><br \/>La valutazione del profilo di sicurezza, la tracciabilit\u00e0 e il presidio regolatorio interno accompagnano ogni fase dello sviluppo, fino alla predisposizione della documentazione tecnica necessaria per l\u2019impiego industriale.<\/p>\n<p>\",\"content_column_breakpoint\":\"m\",\"content_margin_auto\":false,\"css\":\"\\n.el-element{\\n   position: relative;\\n background: rgba(220, 232, 226, 0.92);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.55);\\n  box-shadow:\\n    0 8px 32px rgba(0, 0, 0, 0.02),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\\n\",\"height_expand\":true,\"image\":\"wp-content\/uploads\/2026\/07\/folder-lock-light.svg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_animate\":true,\"image_svg_color\":\"primary\",\"image_svg_inline\":true,\"image_width\":50,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":false,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title\":\"Compliance\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"large\",\"title_style\":\"h2\"},\"name\":\"grid muted con icon\"}]},{\"type\":\"column\",\"props\":{\"css\":\"@media screen and (max-width: 576px) {\\n.el-column{\\n    min-height: 300px;\\n}\\n}\",\"image\":\"wp-content\/uploads\/2026\/08\/tre-pilastri-reytera.jpg\",\"image_effect\":\"parallax\",\"image_parallax_bgy\":\"-5vh,0vh\",\"image_parallax_easing\":\"0.5\",\"image_position\":\"center-center\",\"image_size\":\"cover\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo-card\",\"content\":\"<\/p>\n<p><strong>Efficienza che nasce dal processo.<\/strong><br \/>\\nTecnologie e processi dedicati consentono di ridurre l\u2019uso di suolo e il consumo idrico,\\nrecuperare parte della biomassa vegetale e impiegare solventi a minore impatto, quando\\ncompatibili con le specifiche del progetto.<\/p>\n<p>\",\"content_column_breakpoint\":\"m\",\"content_margin_auto\":false,\"css\":\"\\n.el-element{\\n   position: relative;\\n background: rgba(220, 232, 226, 0.92);\\n  backdrop-filter: blur(12px) saturate(140%);\\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\\n  border: 1px solid rgba(255, 255, 255, 0.55);\\n  box-shadow:\\n    0 8px 32px rgba(0, 0, 0, 0.02),\\n    inset 1px 1px 1px rgba(255, 255, 255, 0.1),\\n    inset -1px -1px 1px rgba(255, 255, 255, 0.1);\\n  overflow: hidden;\\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1),\\n              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);\\n  will-change: transform;\\n}\\n\",\"height_expand\":true,\"image\":\"wp-content\/uploads\/2026\/07\/plant-light.svg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_animate\":true,\"image_svg_color\":\"primary\",\"image_svg_inline\":true,\"image_width\":50,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":false,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title\":\"Sostenibilit\u00e0\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"large\",\"title_style\":\"h2\"},\"name\":\"grid muted con icon\"}]}]}],\"name\":\"04\"},{\"type\":\"section\",\"props\":{\"id\":\"tecnologia\",\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"small\",\"margin_top\":\"remove\",\"visibility\":\"hidden-m\"},\"children\":[{\"type\":\"row\",\"props\":{\"column_gap\":\"collapse\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"row_gap\":\"collapse\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">TECNOLOGIA<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"small \"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_default\":\"1-2\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"block_align\":\"right\",\"content\":\"[ 05. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"position_bottom\":\"30px\",\"text_align\":\"right\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"},\"name\":\"cifra \"}]}]}]},{\"type\":\"html\",\"props\":{\"content\":\"<section class=\"rt-tech rt-tech--compact\" data-reytera-tech style=\"--rt-steps:5;--rt-header-h:50px;--rt-step-h:150vh;\">\r\n\t<div class=\"rt-tech__sticky\">\r\n\t\t<div class=\"rt-tech__inner\">\r\n\r\n\t\t\t<span class=\"rt-vline\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-bl rt-bl--bleed\" aria-hidden=\"true\"><\/span>\r\n\r\n\t\t\t<div class=\"rt-tech__head\">\r\n\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t<div class=\"rt-tech__head-num\"><span class=\"label-dot\">TECNOLOGIA<\/span><\/div>\r\n\t\t\t\t<div class=\"rt-tech__head-label\">\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"rt-tech__head-copy\">\r\n\t\t\t\t\t<p data-rt-split>I blocchi che rendono possibile la piattaforma.<\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"rt-tech__head-year\"><p data-rt-split>[ 05. ]<\/p><\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div class=\"rt-tech__body\">\r\n\r\n\t\t\t\t<div class=\"rt-tech__visual\">\r\n\t\t\t\t\t<div class=\"rt-tech__canvas\" data-rt-canvas\r\n\t\t\t\t\t\tdata-rt-images=\"\"><\/div>\r\n\r\n\t\t\t\t\t<div class=\"rt-markers\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker\" style=\"--x:78%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker\" style=\"--x:13%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker\" style=\"--x:70%;--y:12%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div class=\"rt-tech__steps\">\r\n\t\t\t\t\t<div class=\"rt-accordion\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">1<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Ambiente controllato<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Gestiamo le condizioni che influenzano crescita e qualit\u00e0 botanica, applicando protocolli agronomici definiti sulle specifiche del progetto e riducendo la dipendenza da clima e stagionalit\u00e0.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">2<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Profilo fitochimico<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Orientiamo il profilo fitochimico della pianta verso le caratteristiche richieste dal progetto, attraverso la gestione coordinata delle principali variabili agronomiche.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">3<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Estrazione e metodi<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Selezioniamo tecniche, veicoli e parametri di processo in funzione della botanica, del profilo desiderato e del formato da ottenere.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">4<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Standardizzazione e compliance<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Analisi, tracciabilit\u00e0 e documentazione tecnica supportano la verifica di coerenza, sicurezza e ripetibilit\u00e0 dell\u2019output rispetto alle specifiche condivise.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__item\" data-rt-step style=\"--rt-ip:0\">\r\n\t\t\t\t\t\t\t<span class=\"rt-tl\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t<div class=\"rt-accordion__head\">\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__title\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-counter\">5<\/span>\r\n\t\t\t\t\t\t\t\t\t<h3 class=\"uk-h2\">Know-how, protocolli e propriet\u00e0 intellettuale<\/h3>\r\n\t\t\t\t\t\t\t\t\t<span class=\"rt-title-dot\" aria-hidden=\"true\"><\/span>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<div class=\"rt-accordion__desc\"><p>Protocolli riservati e know-how proprietario sostengono lo sviluppo e l\u2019innovazione. Quando previsto dal progetto, il percorso pu\u00f2 generare propriet\u00e0 intellettuale dedicata, con modalit\u00e0 definite insieme al cliente.<\/p><\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rt-accordion__rule\"><span class=\"rt-tl\" aria-hidden=\"true\"><\/span><\/div>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a class=\"rcta rcta--primary rcta--green rcta--pill rcta--sm\" href=\"mailto:info@reytera.it\" data-rcta>\r\n\t\t\t\t\t\t<span class=\"rcta__text\"><span class=\"rcta__label\">Proponi una partnership<\/span><\/span>\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/section>\r\n\t\t\",\"margin_top\":\"remove\"}}]}],\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"}}],\"name\":\"tecnologia\"},{\"type\":\"section\",\"props\":{\"id\":\"metodo\",\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"animation\":\"parallax\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"parallax_easing\":\"0\",\"parallax_scale\":\"0.9,1 20%\",\"parallax_target\":\"!.uk-section\",\"parallax_y\":\"15vh,0 10%\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"css\":\".uk-background-cover{\\n    border-radius: 0px;\\n}\\n.uk-card-default{\\n      border-radius: 0px; \\n}\",\"image_effect\":\"parallax\",\"image_parallax_bgy\":\"20vh,10vh\",\"image_parallax_easing\":\"0\",\"image_position\":\"bottom-center\",\"image_width\":1000,\"media_focal_point\":\"bottom-center\",\"padding\":\"none\",\"position_sticky_breakpoint\":\"m\",\"style\":\"card-default\"},\"children\":[{\"type\":\"fragment\",\"props\":{\"css\":\".el-element{\\n    padding-top: 110px;\\n    padding-bottom: 110px;\\n}\\n@media screen and (max-width: 1200px){\\n .el-element{\\n    padding-top: 70px;\\n    padding-bottom: 70px;\\n}   \\n}\",\"margin_bottom\":\"remove\",\"margin_top\":\"remove\",\"status\":\"disabled\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"position_sticky_offset\":\"40px\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 06. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"}},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"Dal brief all\u2019output, \\n<br class=\\\"uk-visible@m\\\" \/>ogni fase ha un metodo.\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}}]}],\"props\":{\"status\":\"disabled\",\"width\":\"expand\"}},{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-2,1-2\",\"margin_bottom\":\"large\",\"status\":\"disabled\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"}},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">Metodo scientifico e partnership<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"}},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo testi-effect\",\"column_breakpoint\":\"m\",\"content\":\"Reytera trasforma un\u2019esigenza industriale in un percorso condiviso di sviluppo.\\nCompetenze botaniche, estrattive e analitiche accompagnano il progetto fino a un output\\nverificato rispetto alle specifiche condivise.\",\"margin_bottom\":\"default\",\"margin_top\":\"medium\",\"maxwidth_breakpoint\":\"xl\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"text_align\":\"left\"}}]}]},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n  .ry-vslider {\\n    \/* ---- quote e spazi (valori del reference) ---- *\/\\n    --ry-vs-top: 25vh;            \/* quota di aggancio di immagine, linea e numero *\/\\n    --ry-vs-inset: 15px;          \/* rientro laterale del blocco: come il container UIkit (15px, 30px da 640, 40px da 960) *\/\\n    --ry-vs-gap: 20px;            \/* gutter della griglia a 12 colonne *\/\\n    --ry-vs-space: 80px;         \/* distanza fra gli step (desktop; il reference usa 180px) *\/\\n    --ry-vs-space-m: 60px;        \/* distanza fra gli step (mobile e tablet) *\/\\n    --ry-vs-space-last: 0px;     \/* distanza fra il penultimo step e l'ultimo (desktop) *\/\\n    --ry-vs-radius: 12px;         \/* angoli delle immagini *\/\\n    --ry-vs-ratio: 3 \/ 2;         \/* rapporto delle immagini (1200x800) *\/\\n    --ry-vs-rail-h: calc(100% - 20px);  \/* linea verticale: alta come l'immagine, finisce 20px sopra al suo bordo inferiore *\/\\n    --ry-vs-rail-shift: 0px;      \/* >0 sposta la linea a destra rispetto al centro del numero *\/\\n    --ry-vs-badge: 20px;          \/* diametro del numero *\/\\n    --ry-vs-badge-x: 0px;         \/* numero e linea: distanza dal bordo sinistro della griglia *\/\\n\\n    \/* ---- griglia a 12 colonne (desktop): dove stanno le cose ---- *\/\\n    --ry-vs-cols-text: 2 \/ span 5;    \/* titolo, riga e testo: dalla colonna 2 alla 6 *\/\\n    --ry-vs-cols-media: 8 \/ span 3;   \/* immagine: dalla colonna 7 alla 11 (span 6 per arrivare al bordo destro) *\/\\n\\n    \/* ---- tablet e mobile ---- *\/\\n    --ry-vs-gutter-m: 40px;           \/* spazio a sinistra del contenuto per linea e numero *\/\\n    --ry-vs-rail-m: 40vh;             \/* lunghezza della linea (non c'e' l'immagine a darle l'altezza) *\/\\n    --ry-vs-figure-w: 700px;          \/* immagine di ogni step: larghezza massima ... *\/\\n    --ry-vs-figure-ratio: 700 \/ 350;  \/* ... e proporzioni (500x350) *\/\\n\\n    \/* ---- testata fissa sopra lo slider (solo desktop) ---- *\/\\n    --ry-vs-head-top: 60px;            \/* distanza dal bordo alto del viewport quando e' fissa (es. altezza del menu) *\/\\n    --ry-vs-head-gap: 70px;           \/* spazio fra il paragrafo della testata e la quota di immagine e linea: e' anche il tratto in cui il testo che sale sfuma *\/\\n    --ry-vs-head-bg: transparent;     \/* sfondo della testata fissa; se resta transparent il JS usa il colore del contenitore *\/\\n\\n    \/* ---- colori e font (allineati al sito) ---- *\/\\n    --ry-vs-ink: #192b35;                       \/* linea piena, numero, riga *\/\\n    --ry-vs-ink-soft: rgba(25, 43, 53, 0.2);    \/* linea di sfondo *\/\\n    --ry-vs-badge-text: #fff;\\n    --ry-vs-font-title: 'Aptos-Light', 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n    --ry-vs-font-strong: 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n    --ry-vs-font-text: 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n\\n    position: relative;\\n    padding: 0 var(--ry-vs-inset);\\n    color: var(--ry-vs-ink);\\n  }\\n\\n  \/* ---------- Testata: eyebrow, titolo e, a destra, divisore, etichetta e\\n     paragrafo. Usa le classi del tema. Su desktop resta fissa in alto per\\n     tutta la section (sticky) e lo slider le scorre sotto: la quota di\\n     aggancio di immagine e linea e' il suo bordo inferiore. ---------- *\/\\n  .ry-vslider__headwrap { position: relative; z-index: 3; }\\n  .ry-vslider__head {\\n    position: relative;\\n    padding-bottom: var(--ry-vs-head-gap);\\n  }\\n  .ry-vslider__head-row {\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n  }\\n  .ry-vslider__head-right { grid-column: 7 \/ span 6; }\\n  @media (max-width: 1023.98px) {\\n    .ry-vslider__head-right { grid-column: 1 \/ -1; }\\n  }\\n  @media (min-width: 1024px) {\\n    \/* Il wrapper esce dal flusso (gli step ricevono dal JS un padding-top\\n       pari all'altezza della testata) e diventa il binario dello sticky:\\n       alto fino all'ultimo step, misurato dal JS. *\/\\n    .ry-vslider.is-ready .ry-vslider__headwrap {\\n      position: absolute;\\n      top: 0;\\n      left: var(--ry-vs-inset);\\n      right: var(--ry-vs-inset);\\n      pointer-events: none;\\n    }\\n    .ry-vslider.is-ready .ry-vslider__head {\\n      position: sticky;\\n      top: var(--ry-vs-head-top);\\n      background-color: var(--ry-vs-head-bg);\\n      background-clip: content-box;   \/* lo sfondo si ferma al paragrafo: nello spazio sotto il testo sfuma, non viene tagliato *\/\\n      pointer-events: auto;\\n    }\\n  }\\n\\n  \/* ---------- Step (colonna testo) ---------- *\/\\n  .ry-vslider__items { position: relative; z-index: 1; }\\n\\n  .ry-vslider__item {\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n    margin: 0 0 var(--ry-vs-space-m);\\n    padding: 0;\\n  }\\n  .ry-vslider__item:last-child { margin-bottom: 0; }\\n\\n  .ry-vslider__figure {\\n    grid-column: 1 \/ -1;\\n    margin: 0 0 20px;\\n    overflow: hidden;\\n  }\\n  .ry-vslider__figure img {\\n    display: block;\\n    width: 100%;\\n    height: auto;\\n    aspect-ratio: var(--ry-vs-ratio);\\n    object-fit: cover;\\n  }\\n\\n  .ry-vslider__body { grid-column: 1 \/ -1; position: relative; }\\n\\n\\n  .ry-vslider__num,\\n  .ry-vslider__badge span {\\n   display: inline-flex;\\n    align-items: center;\\n    justify-content: center;\\n    width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n    border-radius: 3px;\\n        background:#DCE8E2;\\n  border:1px solid #3E6F62;\\n          font-weight: 600;\\n    color: #3E6F62;\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 14px;\\n    line-height: 14px;\\n      width: 22px;\\n    height: 22px;\\n    letter-spacing: 0;\\n    \/*width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n    background: var(--ry-vs-ink);\\n    color: var(--ry-vs-badge-text);\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 12px;\\n    line-height: 12px;\\n    letter-spacing: 0;\\n         \/* width: 28px;\\n    height: 28px;\\n    border: 2px solid #F1F4F0;\\n    border-radius: 5px;\\n    background-color: #3e6f62;\\n    color: #F1F4F0;\\n    font-size: calc(8.57px + 0.446429vw);\\n    font-weight: 600;\\n    line-height: 1;\\n    opacity: 0.2;\\n    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;*\/\\n}\\n\\n  .ry-vslider__num { margin: 0 0 20px; }\\n\\n  .ry-vslider__title {\\n    margin: 0px;\\n    font-family: var(--ry-vs-font-title);\\n    font-weight: 300!important;\\n      font-family: \\\"Aptos-Light\\\";\\n    font-size: 32px;\\n    line-height: 36px;\\n    letter-spacing: -0.03em;\\n    color: inherit;\\n  }\\n  .ry-vslider__title strong {\\n    font-family: var(--ry-vs-font-strong);\\n    font-weight: 300;\\n  }\\n\\n  .ry-vslider__line {\\n    width: 0;\\n    height: 1px;\\n    margin: 0 0 2px;\\n    background: var(--ry-vs-ink);\\n    transition: width 1.8s;\\n  }\\n  .ry-vslider__line{\\n    max-width:700px;\\n  }\\n    .ry-vslider__title, .ry-vslider__text{\\nmax-width:540px;\\n}\\n  .ry-vslider__line.is-in { width: 100%; }\\n\\n  .ry-vslider__text {\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 20px;\\n    letter-spacing: -0.03em;\\n      line-height:30px;\\n  }\\n  .ry-vslider__text p { margin: 0; }\\n  .ry-vslider__text p + p { margin-top: 1em; }\\n\\n  \/* Reveal di titolo e testo: entrano dal basso con fade (1.2s come il reference) *\/\\n  .ry-vslider__reveal {\\n    opacity: 0;\\n    transform: translateY(30px);\\n    transition: transform 1.2s, opacity 0.6s;\\n  }\\n  .ry-vslider__reveal.is-in { opacity: 1; transform: translate(0, 0); }\\n\\n  \/* ---------- Palco agganciato (solo desktop, riempito e pinnato dal JS) ---------- *\/\\n  .ry-vslider__track {\\n    display: none;\\n    position: absolute;\\n    top: 0;\\n    bottom: 0;\\n    left: var(--ry-vs-inset);\\n    right: var(--ry-vs-inset);\\n    z-index: 2;\\n    pointer-events: none;\\n  }\\n  .ry-vslider.is-ready .ry-vslider__track { display: block; }\\n  .ry-vslider.is-ready .ry-vslider__num { display: none; }   \/* il numero sta sulla linea *\/\\n  .ry-vslider__stage {\\n    position: relative;\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n    will-change: transform;\\n  }\\n  \/* Aggancio con position: sticky: lo tiene fermo il browser (compositor),\\n     quindi niente tremolio su touch, dove lo scroll non passa da JS.\\n     La classe la mette il JS; il binario (.ry-vslider__track) riceve dal JS\\n     l'altezza esatta, cosi' lo sgancio avviene quando l'ultimo step arriva\\n     alla quota. Senza is-sticky resta il pin a transform di ScrollTrigger. *\/\\n  .ry-vslider.is-sticky .ry-vslider__stage {\\n    position: sticky;\\n    top: var(--ry-vs-top);\\n  }\\n  .ry-vslider__gutter { grid-column: 1 \/ span 1; position: relative; }\\n\\n  \/* Linea verticale: centrata sul numero, sul bordo sinistro della colonna 1 *\/\\n  .ry-vslider__rail {\\n    position: absolute;\\n    top: 0;\\n    left: calc(var(--ry-vs-badge-x) + var(--ry-vs-badge) \/ 2 - 0.5px + var(--ry-vs-rail-shift));\\n    width: 1px;\\n    height: var(--ry-vs-rail-h);\\n    background: var(--ry-vs-ink-soft);\\n  }\\n  .ry-vslider__rail-fill {\\n    position: absolute;\\n    top: 0;\\n    left: -0.5px;\\n    width: 2px;\\n    height: 0;\\n    background: var(--ry-vs-ink);\\n  }\\n\\n  \/* Numero: i 6 span sono sovrapposti, si accende quello dello step corrente *\/\\n  .ry-vslider__badge {\\n    position: absolute;\\n    top: 0;\\n    left: var(--ry-vs-badge-x);\\n    width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n  }\\n  .ry-vslider__badge span {\\n    position: absolute;\\n    inset: 0;\\n    opacity: 0;\\n  }\\n  .ry-vslider__badge span.is-on { opacity: 1; }\\n\\n  \/* Pila immagini: entra con scale 0.5 -> 1 (stessa curva del reference) *\/\\n  .ry-vslider__media {\\n    grid-column: var(--ry-vs-cols-media);\\n    position: relative;\\n    aspect-ratio: var(--ry-vs-ratio);\\n    overflow: hidden;\\n    transform: scale(0.5);\\n    transition: transform 1.5s cubic-bezier(0.17, 0.84, 0.53, 0.86);\\n  }\\n  .ry-vslider__media.is-in { transform: scale(1); }\\n\\n  \/* Pila: contiene tutte le slide. Durante lo scambio riceve dal JS il\\n     filtro SVG di displacement (dissolvenza liquida) e un leggero zoom,\\n     che tiene i bordi deformati fuori dal ritaglio della cornice. *\/\\n  .ry-vslider__stack {\\n    position: absolute;\\n    inset: 0;\\n    transform-origin: center center;\\n    will-change: transform;\\n  }\\n  .ry-vslider__slide,\\n  .ry-vslider__zoom,\\n  .ry-vslider__blur {\\n    position: absolute;\\n    inset: 0;\\n  }\\n  .ry-vslider__slide { overflow: hidden; }\\n  \/* Le immagini dopo la prima partono trasparenti: ognuna si dissolve\\n     sopra la precedente (via GSAP, legata allo scroll). *\/\\n  .ry-vslider__slide:not(:first-child) { opacity: 0; }\\n  .ry-vslider__zoom { transform-origin: center center; }\\n\\n  .ry-vslider__slide img {\\n    position: absolute;\\n    inset: 0;\\n    width: 100%;\\n    height: 100%;\\n    object-fit: cover;\\n    opacity: 0;\\n    filter: blur(8px);\\n    transition: opacity 0.4s cubic-bezier(0.17, 0.84, 0.53, 0.86), filter 1.5s;\\n  }\\n  .ry-vslider__media.is-in .ry-vslider__slide img { opacity: 1; filter: blur(0px); }\\n\\n  \/* ---------- Marker: box dentro lo stage pinnato, allineato alla media\\n     dal JS. Seguono la pila come le immagini (fermi durante il pin, poi\\n     via con lei). Appesi allo stage, che non ha overflow hidden, cosi'\\n     le --y negative non vengono tagliate. ---------- *\/\\n  .ry-vslider__markers {\\n    display: none;\\n    position: absolute;\\n    z-index: 3;\\n    pointer-events: none;\\n  }\\n  .ry-vslider.is-ready .ry-vslider__markers { display: block; }\\n  @media (max-width: 1023.98px) {\\n    .ry-vslider__markers { display: none !important; }\\n  }\\n\\n  @media (min-width: 640px) {\\n    .ry-vslider { --ry-vs-inset: 30px; }\\n  }\\n  @media (min-width: 960px) {\\n    .ry-vslider { --ry-vs-inset: 40px; }\\n  }\\n\\n  \/* ---------- Tablet e mobile: linea e numeri a sinistra (agganciati\\n     allo scroll come su desktop), immagine 500x350 sopra al titolo,\\n     poi titolo e testo. La pila immagini non c'e'. ---------- *\/\\n  @media (max-width: 1023.98px) {\\n    \/* Solo gli step lasciano spazio a linea e numero: la testata resta a\\n       tutta larghezza, allineata al resto della pagina. *\/\\n    .ry-vslider.is-ready .ry-vslider__items { padding-left: var(--ry-vs-gutter-m); }\\n    .ry-vslider.is-ready .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\\n    .ry-vslider.is-ready .ry-vslider__item--last { margin-bottom: 0px; padding-top: 80px;}\\n\\n    .ry-vslider__figure { width: 100%; max-width: var(--ry-vs-figure-w); }\\n    .ry-vslider__figure img { aspect-ratio: var(--ry-vs-figure-ratio); }\\n\\n    .ry-vslider__stage { display: block; }\\n    .ry-vslider__gutter { height: var(--ry-vs-rail-m); }\\n    .ry-vslider__media { display: none; }\\n\\n    .ry-vslider__title {\\n      margin-bottom: 10px;\\n    }\\n\\n  .ry-vslider__line {\\n  margin-bottom: 20px;\\n  }\\n  }\\n\\n  \/* ---------- Desktop ---------- *\/\\n  @media (min-width: 1024px) {\\n    .ry-vslider__item { margin-bottom: var(--ry-vs-space); }\\n    .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\\n    .ry-vslider__item--last { margin-bottom: 0; padding-top: 60px; }\\n\\n    .ry-vslider__body { grid-column: var(--ry-vs-cols-text); grid-row: 1; }\\n    \/* Senza JS l'immagine di ogni step resta visibile a destra (fallback statico) *\/\\n    .ry-vslider__figure { grid-column: var(--ry-vs-cols-media); grid-row: 1; margin: 0; }\\n    .ry-vslider.is-ready .ry-vslider__figure { display: none; }\\n\\n    .ry-vslider__title {\\n      margin-bottom: 10px;\\n      \/*font-size: clamp(38px, 3.2vw, 62px);*\/\\n      \/*line-height: clamp(42px, 3.475vw, 68px);*\/\\n    }\\n    .ry-vslider__line { margin-bottom: 40px; }\\n  }\\n\\n  \/* ---------- Motion ridotta: solo fade brevi, niente slide\/blur\/scale ---------- *\/\\n  @media (prefers-reduced-motion: reduce) {\\n    .ry-vslider__reveal { transform: none; transition: opacity 0.3s; }\\n    .ry-vslider__line { transition: none; }\\n    .ry-vslider__media { transform: none; transition: none; }\\n    .ry-vslider__slide img { filter: none; transition: opacity 0.3s; }\\n  }\\n\\n  \/* ---------- Marker (stile): incollato dal CSS globale del sito, qui\\n     replicato per completezza del blocco. ---------- *\/\\n  .rt-marker {\\n    position: absolute;\\n    left: var(--x);\\n    top: var(--y);\\n    width: 32px;\\n    height: 32px;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    border-radius: 4px;\\n    border: 1px solid rgba(255, 255, 255, .35);\\n    background-color: rgba(241, 244, 240, 0.5);\\n    -webkit-backdrop-filter: blur(4px);\\n    backdrop-filter: blur(4px);\\n    color: #192B35;\\n    pointer-events: none;\\n  }\\n  .rt-marker::before {\\n    content: \\\"\\\";\\n    width: 8px;\\n    height: 8px;\\n    border-radius: 100%;\\n    background-color: currentColor;\\n  }\\n  .padding-testo{\\n    padding-top: 10px;\\n  }\\n<\/style>\n<p>\\n\\n<\/p>\n<section class=\\\"ry-vslider\\\" id=\\\"ry-vslider\\\">\\n\\n  <!-- Testata fissa (desktop): stessi elementi e classi del builder.\\n       Il wrapper e' il binario della testata: il JS lo fa finire dove\\n       arriva l'ultimo step, cosi' testata, immagine e ultimo testo si\\n       sganciano insieme e restano visibili fino alla fine. -->\\n  <\/p>\n<div class=\\\"ry-vslider__headwrap\\\">\\n  <\/p>\n<div class=\\\"ry-vslider__head\\\">\\n    <\/p>\n<div class=\\\"uk-h5 uk-text-primary uk-margin-small-bottom uk-width-small\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\">[ 06. ]<\/div>\n<p>\\n    <\/p>\n<h3 class=\\\"uk-heading-large ry-blur uk-margin-remove-top\\\">Dal brief all\u2019output,<br class=\\\"uk-visible@m\\\">ogni fase ha un metodo.<\/h3>\n<p>\\n    <\/p>\n<div class=\\\"ry-vslider__head-row\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__head-right\\\">\\n        <\/p>\n<div>\n<div class=\\\"divider is-visible\\\"><\/div>\n<\/div>\n<p>\\n        <\/p>\n<div class=\\\"uk-h6 uk-margin\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\"><span class=\\\"label-dot\\\">Metodo scientifico e partnership<\/span><\/div>\n<p>\\n        <\/p>\n<div class=\\\"uk-panel paragrafo padding-testo testi-effect uk-margin-default-top uk-text-left\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\">Reytera trasforma un\u2019esigenza industriale in un percorso condiviso di sviluppo. Competenze botaniche, estrattive e analitiche accompagnano il progetto fino a un output verificato rispetto alle specifiche condivise.<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n\\n  <!-- Palco sticky: lo riempie il JS (linea, numeri, pila immagini) -->\\n  <\/p>\n<div class=\\\"ry-vslider__track\\\" aria-hidden=\\\"true\\\">\\n    <\/p>\n<div class=\\\"ry-vslider__stage\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__gutter\\\">\\n        <\/p>\n<div class=\\\"ry-vslider__rail\\\">\n<div class=\\\"ry-vslider__rail-fill\\\"><\/div>\n<\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__badge\\\"><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__media\\\"><\/div>\n<p>\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n\\n  <\/p>\n<div class=\\\"ry-vslider__items\\\">\\n\\n    <!-- SEGNAPOSTO: testi e immagini dei 6 step sono di esempio -->\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/brief-2-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">1<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal uk-h2\\\">Brief con cliente<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Definiamo obiettivi, formato, performance attese e principali vincoli tecnici e industriali del progetto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/Botanist_2.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">2<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Sviluppo botanico<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Selezioniamo la botanica e definiamo il protocollo agronomico pi\u00f9 coerente con il profilo richiesto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/Definizione-del-processo-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">3<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Definizione del processo<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Costruiamo il percorso pi\u00f9 coerente con la matrice e con l\u2019output richiesto: fresco, essiccato o estratto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/defenizione-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">4<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Analisi e caratterizzazione<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Analizziamo e caratterizziamo l\u2019output per verificarne i parametri rilevanti rispetto alle specifiche del progetto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire -->\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/validazzione-img-1.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">5<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Validazione<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Confrontiamo i risultati con le specifiche condivise e, quando necessario, perfezioniamo il processo fino alla validazione finale.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire -->\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/output-finale-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">6<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Output finale<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Il percorso si conclude con un output controllato, caratterizzato e sviluppato per integrarsi nel processo industriale del cliente.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n  <\/p><\/div>\n<p>\\n<\/section>\n<p>\\n\\n<script>\\n(function () {\\n  'use strict';\\n\\n  \/* Nota di stile: niente doppia e-commerciale, niente segno \\\"minore di\\\"\\n     e niente backslash nel JS, cosi' il blocco HTML del builder arriva\\n     in pagina integro (i cicli usano \\\"n > i\\\", le condizioni if annidati). *\/\\n\\n  var ROOT_SEL = '.ry-vslider';\\n  var DESKTOP_MQ = '(min-width: 1024px)';   \/* stessa soglia del CSS *\/\\n  var MOBILE_MQ = '(max-width: 1023.98px)';\\n  var SWAP_AT = 10;        \/* % viewport: lo step inizia a cedere l'immagine quando il suo top e' a 10vh *\/\\n  var TEXT_IN_WINDOW = 12; \/* % viewport: senza testata fissa, tratto oltre la quota in cui il testo corrente sparisce e appare il successivo (con la testata vale --ry-vs-head-gap) *\/\\n  var SWAP_LEN = 15;       \/* % viewport: con la testata fissa, lunghezza dello scambio immagine (parte quando il testo comincia a sfumare) *\/\\n  \/* Dissolvenza liquida (solo desktop): filtro SVG feTurbulence + feDisplacementMap *\/\\n  var LIQUID_PEAK = 60;              \/* intensita' massima dello spostamento (attributo scale del displacement), a meta' scambio *\/\\n  var LIQUID_ZOOM = 1.1;             \/* zoom della pila a meta' scambio: tiene i bordi deformati fuori dalla cornice *\/\\n  var LIQUID_FREQ = '0.012 0.018';   \/* frequenza della turbolenza (piu' bassa = onde piu' larghe) *\/\\n  var LIQUID_OCTAVES = 2;\\n  var MOBILE_DIM = 0.5;    \/* tablet e mobile: opacita' a cui si attenua il blocco (immagine + testo) che sale oltre il numero *\/\\n  var MOBILE_DIM_RANGE = 20; \/* % viewport: tratto oltre la quota in cui avviene l'attenuazione *\/\\n  var REVEAL_AT = 'top 90%';\\n\\n  \/* Marker: coordinate x\/y (le classi uk-visible@s \/ uk-hidden@s\\n     restano nel markup per lo switch di breakpoint UIkit). *\/\\n  var MARKERS_HTML =\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:43%; --y:0px; \\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:-5px; --y:120px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:69%; --y:220px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:65%; --y:-280px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>';\\n\\n  if (window.ryVsliderAttivo) { return; }\\n  window.ryVsliderAttivo = true;\\n\\n  \/* GSAP e ScrollTrigger dovrebbero esserci gia' (tema\/plugin). Se dopo\\n     il load mancano ancora, si caricano da CDN come rete di sicurezza. *\/\\n  var gsapLoading = false;\\n  function hasGsap() {\\n    if (typeof gsap === 'undefined') { return false; }\\n    if (typeof ScrollTrigger === 'undefined') { return false; }\\n    return true;\\n  }\\n  function ensureGsap(done) {\\n    if (hasGsap()) { return done(); }\\n    if (document.readyState !== 'complete') {\\n      window.addEventListener('load', function () { ensureGsap(done); }, { once: true });\\n      return;\\n    }\\n    if (gsapLoading) { return; }\\n    gsapLoading = true;\\n    var base = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/';\\n    function load(src, next) {\\n      var s = document.createElement('script');\\n      s.src = base + src;\\n      s.onload = next;\\n      document.head.appendChild(s);\\n    }\\n    load('gsap.min.js', function () { load('ScrollTrigger.min.js', done); });\\n  }\\n\\n  \/* Lenis: sul sito e' creato in uno script inline con \\\"const lenis = new\\n     Lenis(...)\\\": non sta su window, ma una const globale e' visibile\\n     anche da qui. Agganciando ScrollTrigger.update al suo evento\\n     \\\"scroll\\\", il pin viene aggiornato nello stesso frame in cui Lenis\\n     muove la pagina: senza questo aggancio ScrollTrigger reagirebbe\\n     all'evento scroll nativo un frame dopo, e la linea da 1px tremerebbe. *\/\\n  function findLenis() {\\n    if (window.lenis) { return window.lenis; }\\n    try {\\n      if (typeof lenis !== 'undefined') { return lenis; }\\n    } catch (e) { \/* const ancora non inizializzata: nessun Lenis *\/ }\\n    return null;\\n  }\\n  function integrateLenis() {\\n    var instance = findLenis();\\n    if (!instance) { return window; }\\n    if (typeof instance.on !== 'function') { return window; }\\n\\n    var wrapper = window;\\n    if (instance.options) { if (instance.options.wrapper) { wrapper = instance.options.wrapper; } }\\n    var isWindowScroll = false;\\n    if (wrapper === window) { isWindowScroll = true; }\\n    if (wrapper === document.documentElement) { isWindowScroll = true; }\\n    if (wrapper === document.body) { isWindowScroll = true; }\\n\\n    if (isWindowScroll) {\\n      instance.on('scroll', ScrollTrigger.update);\\n      console.log('[ry-vslider] Lenis sincronizzato con ScrollTrigger');\\n      return window;\\n    }\\n\\n    ScrollTrigger.scrollerProxy(wrapper, {\\n      scrollTop: function (value) {\\n        if (arguments.length) { instance.scrollTo(value, { immediate: true }); }\\n        return instance.scroll || 0;\\n      },\\n      getBoundingClientRect: function () {\\n        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };\\n      },\\n      pinType: wrapper.style.transform ? 'transform' : 'fixed'\\n    });\\n    instance.on('scroll', ScrollTrigger.update);\\n    ScrollTrigger.defaults({ scroller: wrapper });\\n    return wrapper;\\n  }\\n\\n  function toArray(list) { return Array.prototype.slice.call(list); }\\n\\n  function make(tag, className) {\\n    var node = document.createElement(tag);\\n    if (className) { node.className = className; }\\n    return node;\\n  }\\n\\n  \/* Filtro SVG per la dissolvenza liquida: turbolenza (rumore statico) +\\n     displacement map con scale 0; il JS anima scale durante lo scambio.\\n     Creato via DOM (niente markup), un filtro per sezione. *\/\\n  var SVG_NS = 'http:\/\/www.w3.org\/2000\/svg';\\n  var liquidCount = 0;\\n  function buildLiquidFilter(root) {\\n    liquidCount += 1;\\n    var id = 'ry-liquid-' + liquidCount;\\n    var svg = document.createElementNS(SVG_NS, 'svg');\\n    svg.setAttribute('width', '0');\\n    svg.setAttribute('height', '0');\\n    svg.setAttribute('aria-hidden', 'true');\\n    svg.style.position = 'absolute';\\n    var filter = document.createElementNS(SVG_NS, 'filter');\\n    filter.setAttribute('id', id);\\n    filter.setAttribute('x', '-20%');\\n    filter.setAttribute('y', '-20%');\\n    filter.setAttribute('width', '140%');\\n    filter.setAttribute('height', '140%');\\n    filter.setAttribute('color-interpolation-filters', 'sRGB');\\n    var turb = document.createElementNS(SVG_NS, 'feTurbulence');\\n    turb.setAttribute('type', 'fractalNoise');\\n    turb.setAttribute('baseFrequency', LIQUID_FREQ);\\n    turb.setAttribute('numOctaves', String(LIQUID_OCTAVES));\\n    turb.setAttribute('seed', '7');\\n    turb.setAttribute('result', 'noise');\\n    var disp = document.createElementNS(SVG_NS, 'feDisplacementMap');\\n    disp.setAttribute('in', 'SourceGraphic');\\n    disp.setAttribute('in2', 'noise');\\n    disp.setAttribute('scale', '0');\\n    disp.setAttribute('xChannelSelector', 'R');\\n    disp.setAttribute('yChannelSelector', 'G');\\n    filter.appendChild(turb);\\n    filter.appendChild(disp);\\n    svg.appendChild(filter);\\n    root.appendChild(svg);\\n    return { id: id, disp: disp };\\n  }\\n\\n  \/* Costruisce il palco: una slide per step (clone dell'immagine dello\\n     step) dentro la pila, un numero per step, e le classi penultimo\/ultimo. *\/\\n  function build(root, items) {\\n    var media = root.querySelector('.ry-vslider__media');\\n    var badge = root.querySelector('.ry-vslider__badge');\\n    var count = items.length;\\n    var slides = [];\\n    var nums = [];\\n    var stack = make('div', 'ry-vslider__stack');\\n    media.appendChild(stack);\\n\\n    items.forEach(function (item, i) {\\n      var source = item.querySelector('.ry-vslider__figure img');\\n      var slide = make('div', 'ry-vslider__slide');\\n      var zoom = make('div', 'ry-vslider__zoom');\\n      var blur = make('div', 'ry-vslider__blur');\\n      var img = source ? source.cloneNode(true) : make('img');\\n      slide.style.zIndex = String(i + 1);   \/* ogni immagine si dissolve sopra la precedente *\/\\n      if (i === 0) { img.setAttribute('loading', 'eager'); }\\n      img.setAttribute('alt', '');\\n      blur.appendChild(img);\\n      zoom.appendChild(blur);\\n      slide.appendChild(zoom);\\n      stack.appendChild(slide);\\n      slides.push(slide);\\n\\n      var num = make('span', i === 0 ? 'is-on' : '');\\n      num.textContent = String(i + 1);\\n      badge.appendChild(num);\\n      nums.push(num);\\n    });\\n\\n    if (count > 1) { items[count - 2].classList.add('ry-vslider__item--penult'); }\\n    items[count - 1].classList.add('ry-vslider__item--last');\\n\\n    return { slides: slides, nums: nums, stack: stack };\\n  }\\n\\n  function setup(root, scroller, reduced) {\\n    var items = toArray(root.querySelectorAll('.ry-vslider__item'));\\n    var count = items.length;\\n    if (count === 0) { return; }\\n\\n    var built = build(root, items);\\n    var slides = built.slides;\\n    var nums = built.nums;\\n    var stack = built.stack;\\n    var liquid = null;\\n    if (!reduced) { liquid = buildLiquidFilter(root); }\\n    var track = root.querySelector('.ry-vslider__track');\\n    var stage = root.querySelector('.ry-vslider__stage');\\n    var media = root.querySelector('.ry-vslider__media');\\n    var fill = root.querySelector('.ry-vslider__rail-fill');\\n    var lastBody = items[count - 1].querySelector('.ry-vslider__body');\\n    var itemsEl = root.querySelector('.ry-vslider__items');\\n    var head = root.querySelector('.ry-vslider__head');\\n    var headwrap = root.querySelector('.ry-vslider__headwrap');\\n    root.classList.add('is-ready');\\n\\n    \/* Testata fissa: se non ha un colore di sfondo suo, prende quello del\\n       primo contenitore che ne ha uno, cosi' i testi che le scorrono sotto\\n       spariscono davvero. *\/\\n    if (head) {\\n      var headBg = getComputedStyle(head).backgroundColor;\\n      var isClear = false;\\n      if (headBg === 'transparent') { isClear = true; }\\n      if (headBg === 'rgba(0, 0, 0, 0)') { isClear = true; }\\n      if (isClear) {\\n        var bgEl = root;\\n        while (bgEl) {\\n          if (bgEl === document.documentElement) { break; }\\n          var c = getComputedStyle(bgEl).backgroundColor;\\n          if (c !== 'transparent') { if (c !== 'rgba(0, 0, 0, 0)') { head.style.backgroundColor = c; break; } }\\n          bgEl = bgEl.parentElement;\\n        }\\n      }\\n    }\\n\\n    \/* Modalita' di aggancio. Default: position sticky (nessun tremolio su\\n       touch: lo scroll del compositor e lo sticky sono nello stesso frame,\\n       il pin a transform arriva un frame dopo). Lo sticky si annulla\\n       dentro un antenato con overflow hidden: quegli antenati passano a\\n       overflow clip, che ritaglia uguale ma non blocca lo sticky.\\n       data-ry-pin=\\\"transform\\\" sulla section forza il vecchio pin. *\/\\n    var useSticky = root.getAttribute('data-ry-pin') !== 'transform';\\n    if (useSticky) {\\n      if (!window.CSS) { useSticky = false; }\\n      else if (!CSS.supports('overflow', 'clip')) { useSticky = false; }\\n    }\\n    if (useSticky) {\\n      var anc = root.parentElement;\\n      while (anc) {\\n        if (anc === document.body) { break; }\\n        var ov = getComputedStyle(anc);\\n        if (ov.overflowX === 'hidden') { anc.style.overflowX = 'clip'; }\\n        if (ov.overflowY === 'hidden') { anc.style.overflowY = 'clip'; }\\n        anc = anc.parentElement;\\n      }\\n      root.classList.add('is-sticky');\\n    }\\n\\n    \/* Marker dentro il palco pinnato (.ry-vslider__stage): seguono la pila\\n       come le immagini (fermi durante il pin, poi via con lei). Allineati\\n       alla colonna media, ma appesi allo stage (che non ha overflow hidden)\\n       cosi' le --y negative non vengono tagliate. *\/\\n    var markers = make('div', 'ry-vslider__markers');\\n    markers.innerHTML = MARKERS_HTML;\\n    stage.appendChild(markers);\\n\\n    function placeMarkers() {\\n      var mediaRect = media.getBoundingClientRect();\\n      var stageRect = stage.getBoundingClientRect();\\n      markers.style.left = (mediaRect.left - stageRect.left) + 'px';\\n      markers.style.top = (mediaRect.top - stageRect.top) + 'px';\\n      markers.style.width = mediaRect.width + 'px';\\n      markers.style.height = mediaRect.height + 'px';\\n    }\\n    placeMarkers();\\n    ScrollTrigger.addEventListener('refresh', placeMarkers);\\n    window.addEventListener('resize', placeMarkers);\\n\\n    \/* ---- Reveal (tutti i breakpoint): titolo, testo, riga ---- *\/\\n    var revealEls = toArray(root.querySelectorAll('.ry-vslider__reveal, .ry-vslider__line'));\\n    revealEls.forEach(function (el) {\\n      if (reduced) { el.classList.add('is-in'); return; }\\n      ScrollTrigger.create({\\n        trigger: el,\\n        scroller: scroller,\\n        start: REVEAL_AT,\\n        once: true,\\n        onEnter: function () { el.classList.add('is-in'); }\\n      });\\n    });\\n\\n    \/* ---- Aggancio, linea e numeri su tutti i breakpoint; su desktop\\n       anche la pila immagini con le transizioni ---- *\/\\n    var mm = gsap.matchMedia();\\n    mm.add(DESKTOP_MQ, function () { return setupPinned(true); });\\n    mm.add(MOBILE_MQ, function () { return setupPinned(false); });\\n\\n    \/* Primo elemento visibile di uno step: su tablet\/mobile l'immagine\\n       (sta sopra al titolo), su desktop il blocco testo (l'immagine del\\n       singolo step e' nascosta, c'e' la pila). E' il riferimento per\\n       accendere il numero e per la fine dell'aggancio. *\/\\n    function contentTop(item, isDesktop) {\\n      var body = item.querySelector('.ry-vslider__body');\\n      if (isDesktop) { return body; }\\n      return item.querySelector('.ry-vslider__figure') || body;\\n    }\\n\\n    function setupPinned(isDesktop) {\\n      var lastTop = contentTop(items[count - 1], isDesktop);\\n\\n      \/* Quota di aggancio in px, dalla variabile --ry-vs-top (vh, % o px) *\/\\n      function stickPx() {\\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-top').trim();\\n        var n = parseFloat(raw);\\n        if (isNaN(n)) { return window.innerHeight * 0.2; }\\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\\n        if (raw.indexOf('%') > -1) { return window.innerHeight * n \/ 100; }\\n        return n;\\n      }\\n      function stickStart() { return 'top ' + stickPx() + 'px'; }\\n      \/* Quota della testata fissa in px (variabile --ry-vs-head-top) *\/\\n      function headTopPx() {\\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-head-top').trim();\\n        var n = parseFloat(raw);\\n        if (isNaN(n)) { return 0; }\\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\\n        return n;\\n      }\\n\\n      \/* Prima di ogni misura di ScrollTrigger:\\n         1) gli antenati con transform (es. il pannello con uk-parallax\\n            \\\"scale: 0.9,1\\\") vengono azzerati, altrimenti start, end e\\n            dimensioni del pin escono scalati o spostati. Vengono\\n            ripristinati appena la misura e' finita;\\n         2) l'ultimo step e' alto almeno quanto il palco (immagine su\\n            desktop, linea su mobile), cosi' il palco una volta sganciato\\n            non sporge sotto la section. *\/\\n      var transformed = [];\\n      function beforeMeasure() {\\n        transformed = [];\\n        var el = root.parentElement;\\n        while (el) {\\n          if (el === document.body) { break; }\\n          if (getComputedStyle(el).transform !== 'none') {\\n            transformed.push({ el: el, inline: el.style.transform });\\n            el.style.transform = 'none';\\n          }\\n          el = el.parentElement;\\n        }\\n        var offset = lastBody.getBoundingClientRect().top - lastTop.getBoundingClientRect().top;\\n        lastBody.style.minHeight = Math.max(0, Math.round(stage.offsetHeight - offset)) + 'px';\\n        \/* Con la testata fissa (desktop): la quota di aggancio e' il suo\\n           bordo inferiore; gli step partono sotto di lei (padding-top);\\n           il suo binario finisce dove arriva l'ultimo step, cosi' si\\n           sgancia nello stesso istante del palco e da li' testata,\\n           immagine e ultimo testo scorrono insieme. Il binario del palco\\n           parte dal primo step, non dalla cima della section. *\/\\n        var rootTop = root.getBoundingClientRect().top;\\n        if (isDesktop) {\\n          if (head) {\\n            var headH = head.offsetHeight;\\n            root.style.setProperty('--ry-vs-top', Math.round(headH + headTopPx()) + 'px');\\n            itemsEl.style.paddingTop = headH + 'px';\\n            if (headwrap) { headwrap.style.height = Math.round(lastTop.getBoundingClientRect().top - rootTop) + 'px'; }\\n          }\\n        } else {\\n          root.style.removeProperty('--ry-vs-top');\\n          itemsEl.style.paddingTop = '';\\n          if (headwrap) { headwrap.style.height = ''; }\\n        }\\n        var itemsTop = items[0].getBoundingClientRect().top;\\n        track.style.top = Math.round(itemsTop - rootTop) + 'px';\\n        \/* Sticky: il binario finisce dove il contenuto dell'ultimo step\\n           arriva alla quota, piu' l'altezza del palco (sgancio esatto). *\/\\n        if (useSticky) {\\n          var trackEnd = lastTop.getBoundingClientRect().top - itemsTop + stage.offsetHeight;\\n          track.style.bottom = 'auto';\\n          track.style.height = Math.round(trackEnd) + 'px';\\n        }\\n      }\\n      function afterMeasure() {\\n        transformed.forEach(function (t) { t.el.style.transform = t.inline; });\\n        transformed = [];\\n      }\\n      ScrollTrigger.addEventListener('refreshInit', beforeMeasure);\\n      ScrollTrigger.addEventListener('refresh', afterMeasure);\\n\\n      \/* Aggancio del palco senza sticky (solo se forzato o se il browser\\n         non supporta overflow clip): pin di ScrollTrigger dalla quota\\n         --ry-vs-top fino a quando il contenuto dell'ultimo step arriva\\n         alla stessa quota. pinSpacing false: il palco vive in un overlay\\n         assoluto, non deve aggiungere spazio. *\/\\n      if (!useSticky) {\\n        ScrollTrigger.create({\\n          trigger: itemsEl,\\n          scroller: scroller,\\n          start: stickStart,\\n          endTrigger: lastTop,\\n          end: stickStart,\\n          pin: stage,\\n          pinSpacing: false,\\n          pinType: 'transform'\\n        });\\n      }\\n\\n      \/* Linea: si riempie da quando il palco si aggancia a quando si sgancia *\/\\n      gsap.fromTo(fill, { height: '0%' }, {\\n        height: '100%',\\n        ease: 'none',\\n        scrollTrigger: {\\n          trigger: itemsEl,\\n          scroller: scroller,\\n          start: stickStart,\\n          endTrigger: lastTop,\\n          end: stickStart,\\n          scrub: true\\n        }\\n      });\\n\\n      \/* Numeri 2..N: si accendono quando il loro step arriva alla quota\\n         di aggancio (e si spengono tornando indietro). Il numero acceso\\n         piu' recente copre i precedenti. *\/\\n      items.forEach(function (item, i) {\\n        if (i === 0) { return; }\\n        ScrollTrigger.create({\\n          trigger: contentTop(item, isDesktop),\\n          scroller: scroller,\\n          start: stickStart,\\n          onEnter: function () { nums[i].classList.add('is-on'); },\\n          onLeaveBack: function () { nums[i].classList.remove('is-on'); }\\n        });\\n      });\\n\\n      \/* Transizioni (solo desktop): nel tratto di scambio dello step i la\\n         sua immagine lascia il posto alla successiva con la dissolvenza\\n         liquida (vedi sotto). *\/\\n      \/* Inizio dello scambio: a SWAP_AT% del viewport; con la testata fissa\\n         il punto e' invece SWAP_AT% sotto la quota di aggancio (il testo\\n         sparisce sotto la testata, l'immagine lo segue subito). *\/\\n      var withHead = false;\\n      if (head) { if (isDesktop) { withHead = true; } }\\n      function swapTopPx() {\\n        if (withHead) { return stickPx(); }\\n        return window.innerHeight * SWAP_AT \/ 100;\\n      }\\n      function swapStart() { return 'top ' + swapTopPx() + 'px'; }\\n      \/* Con la testata: scambio breve e fisso (SWAP_LEN), cosi' non si\\n         sovrappone mai allo scambio dello step successivo e resta in\\n         sincrono col testo. Senza: fino all'uscita dello step, come nel\\n         reference. *\/\\n      function swapEnd() {\\n        if (withHead) { return 'top ' + (stickPx() - window.innerHeight * SWAP_LEN \/ 100) + 'px'; }\\n        return 'bottom top';\\n      }\\n      function swapTrigger(item) {\\n        return {\\n          trigger: item,\\n          scroller: scroller,\\n          start: swapStart,\\n          end: swapEnd,\\n          scrub: true\\n        };\\n      }\\n      if (isDesktop) {\\n        \/* Reveal della pila (trigger = section, mai l'elemento agganciato) *\/\\n        if (reduced) {\\n          media.classList.add('is-in');\\n        } else {\\n          ScrollTrigger.create({\\n            trigger: root,\\n            scroller: scroller,\\n            start: REVEAL_AT,\\n            once: true,\\n            onEnter: function () { media.classList.add('is-in'); }\\n          });\\n        }\\n\\n        \/* Dissolvenza liquida: l'immagine in arrivo si dissolve sopra la\\n           corrente con un leggero zoom in uscita, mentre il displacement\\n           sale a LIQUID_PEAK a meta' scambio e torna a 0; la pila zooma\\n           fino a LIQUID_ZOOM e rientra, cosi' i bordi deformati restano\\n           fuori dalla cornice. Il filtro e' attivo solo durante lo scambio\\n           (costa alla GPU). Con motion ridotta: dissolvenza semplice. *\/\\n        function liquidTrigger(item) {\\n          var vars = swapTrigger(item);\\n          if (liquid) {\\n            vars.onToggle = function (self) {\\n              stack.style.filter = self.isActive ? 'url(#' + liquid.id + ')' : '';\\n            };\\n          }\\n          return vars;\\n        }\\n        for (var i = 0; count - 1 > i; i += 1) {\\n          var next = slides[i + 1];\\n          var tl = gsap.timeline({ scrollTrigger: liquidTrigger(items[i]) });\\n          tl.to(next, { opacity: 1, ease: 'power1.inOut', duration: 1 }, 0);\\n          tl.fromTo(next.querySelector('.ry-vslider__zoom'), { scale: 1.06 }, { scale: 1, ease: 'power2.out', duration: 1, immediateRender: false }, 0);\\n          if (liquid) {\\n            tl.to(liquid.disp, { attr: { scale: LIQUID_PEAK }, ease: 'sine.in', duration: 0.5 }, 0);\\n            tl.to(liquid.disp, { attr: { scale: 0 }, ease: 'sine.out', duration: 0.5 }, 0.5);\\n            tl.to(stack, { scale: LIQUID_ZOOM, ease: 'sine.in', duration: 0.5 }, 0);\\n            tl.to(stack, { scale: 1, ease: 'sine.out', duration: 0.5 }, 0.5);\\n          }\\n        }\\n\\n        \/* Testi: uno solo visibile alla volta.\\n           - Il testo corrente sfuma a 0 mentre il suo top sale oltre la\\n             quota di aggancio, nel tratto \\\"outLen\\\": con la testata fissa\\n             e' lo spazio sotto il paragrafo (--ry-vs-head-gap), cosi'\\n             arriva al paragrafo gia' trasparente; senza testata e'\\n             TEXT_IN_WINDOW.\\n           - Il testo successivo appare esattamente mentre il precedente\\n             sparisce (stessa curva, rovesciata) e resta pieno finche' non\\n             tocca a lui salire oltre la quota.\\n           - Tutti gli altri restano a 0. Il primo non sfuma in entrata,\\n             l'ultimo non sfuma in uscita.\\n           Opacita' calcolata dalle posizioni reali a ogni scroll: reversibile\\n           e senza conflitti anche con step vicini. *\/\\n        var bodies = items.map(function (item) { return item.querySelector('.ry-vslider__body'); });\\n        function outLenPx() {\\n          if (withHead) { return Math.max(1, parseFloat(getComputedStyle(head).paddingBottom) || 0); }\\n          return Math.max(1, window.innerHeight * TEXT_IN_WINDOW \/ 100);\\n        }\\n        \/* 0..1: quanto il testo k e' salito oltre la quota, sul tratto outLen *\/\\n        function outProgress(k) {\\n          var r = bodies[k].getBoundingClientRect();\\n          var q = stickPx();\\n          if (r.top >= q) { return 0; }\\n          return Math.min(1, (q - r.top) \/ outLenPx());\\n        }\\n        function applyTextOpacity() {\\n          bodies.forEach(function (body, k) {\\n            var o = 1;\\n            if (k > 0) { o = outProgress(k - 1); }\\n            if (count - 1 > k) { o = Math.min(o, 1 - outProgress(k)); }\\n            body.style.opacity = String(Math.max(0, Math.min(1, o)));\\n          });\\n        }\\n        bodies.forEach(function (body) {\\n          ScrollTrigger.create({\\n            trigger: body,\\n            scroller: scroller,\\n            start: 'top bottom',\\n            end: 'bottom top',\\n            onUpdate: applyTextOpacity,\\n            onToggle: applyTextOpacity,\\n            onRefresh: applyTextOpacity\\n          });\\n        });\\n        applyTextOpacity();\\n      } else {\\n        \/* Tablet e mobile: il blocco (immagine + testo) che sale oltre la\\n           quota del numero si attenua gradualmente fino a MOBILE_DIM nel\\n           tratto MOBILE_DIM_RANGE; l'ultimo resta pieno. Calcolato dalla\\n           posizione reale a ogni scroll, reversibile. *\/\\n        function applyItemOpacity() {\\n          var q = stickPx();\\n          var range = Math.max(1, window.innerHeight * MOBILE_DIM_RANGE \/ 100);\\n          items.forEach(function (item, k) {\\n            var o = 1;\\n            if (count - 1 > k) {\\n              var r = item.getBoundingClientRect();\\n              if (q > r.top) {\\n                var p = Math.min(1, (q - r.top) \/ range);\\n                o = 1 - (1 - MOBILE_DIM) * p;\\n              }\\n            }\\n            item.style.opacity = String(o);\\n          });\\n        }\\n        items.forEach(function (item) {\\n          ScrollTrigger.create({\\n            trigger: item,\\n            scroller: scroller,\\n            start: 'top bottom',\\n            end: 'bottom top',\\n            onUpdate: applyItemOpacity,\\n            onToggle: applyItemOpacity,\\n            onRefresh: applyItemOpacity\\n          });\\n        });\\n        applyItemOpacity();\\n      }\\n\\n      \/* Se cambia l'altezza dei testi (font, immagini, resize) si ricalcola tutto *\/\\n      var refreshTO;\\n      function scheduleRefresh() {\\n        clearTimeout(refreshTO);\\n        refreshTO = setTimeout(function () { ScrollTrigger.refresh(); }, 120);\\n      }\\n      var observer = null;\\n      if (typeof ResizeObserver !== 'undefined') {\\n        observer = new ResizeObserver(scheduleRefresh);\\n        observer.observe(root.querySelector('.ry-vslider__items'));\\n      }\\n\\n      return function cleanup() {\\n        ScrollTrigger.removeEventListener('refreshInit', beforeMeasure);\\n        ScrollTrigger.removeEventListener('refresh', afterMeasure);\\n        afterMeasure();\\n        if (observer) { observer.disconnect(); }\\n        clearTimeout(refreshTO);\\n        lastBody.style.minHeight = '';\\n        track.style.height = '';\\n        track.style.bottom = '';\\n        track.style.top = '';\\n        root.style.removeProperty('--ry-vs-top');\\n        itemsEl.style.paddingTop = '';\\n        if (headwrap) { headwrap.style.height = ''; }\\n        items.forEach(function (item) { item.querySelector('.ry-vslider__body').style.opacity = ''; item.style.opacity = ''; });\\n        nums.forEach(function (num, i) { num.classList.toggle('is-on', i === 0); });\\n      };\\n    }\\n  }\\n\\n  function init() {\\n    gsap.registerPlugin(ScrollTrigger);\\n    var scroller = integrateLenis();\\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\\n    var roots = toArray(document.querySelectorAll(ROOT_SEL));\\n    roots.forEach(function (root) { setup(root, scroller, reduced); });\\n    console.log('[ry-vslider] attivo su ' + roots.length + ' sezione\/i');\\n\\n    if (document.fonts) {\\n      if (document.fonts.ready) { document.fonts.ready.then(function () { ScrollTrigger.refresh(); }); }\\n    }\\n    window.addEventListener('load', function () { ScrollTrigger.refresh(); }, { once: true });\\n  }\\n\\n  if (document.readyState === 'loading') {\\n    document.addEventListener('DOMContentLoaded', function () { ensureGsap(init); });\\n  } else {\\n    ensureGsap(init);\\n  }\\n})();\\n<\/script>\\n\",\"status\":\"disabled\"},\"name\":\"con fixed\"},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n  .ry-vslider {\\n    \/* ---- quote e spazi (valori del reference) ---- *\/\\n    --ry-vs-top: 25vh;            \/* quota di aggancio di immagine, linea e numero *\/\\n    --ry-vs-inset: 15px;          \/* rientro laterale del blocco: come il container UIkit (15px, 30px da 640, 40px da 960) *\/\\n    --ry-vs-gap: 20px;            \/* gutter della griglia a 12 colonne *\/\\n    --ry-vs-space: 80px;         \/* distanza fra gli step (desktop; il reference usa 180px) *\/\\n    --ry-vs-space-m: 60px;        \/* distanza fra gli step (mobile e tablet) *\/\\n    --ry-vs-space-last: 0px;     \/* distanza fra il penultimo step e l'ultimo (desktop) *\/\\n    --ry-vs-radius: 12px;         \/* angoli delle immagini *\/\\n    --ry-vs-ratio: 3 \/ 2;         \/* rapporto delle immagini (1200x800) *\/\\n    --ry-vs-rail-h: calc(100% - 20px);  \/* linea verticale: alta come l'immagine, finisce 20px sopra al suo bordo inferiore *\/\\n    --ry-vs-rail-shift: 0px;      \/* >0 sposta la linea a destra rispetto al centro del numero *\/\\n    --ry-vs-badge: 20px;          \/* diametro del numero *\/\\n    --ry-vs-badge-x: 0px;         \/* numero e linea: distanza dal bordo sinistro della griglia *\/\\n\\n    \/* ---- griglia a 12 colonne (desktop): dove stanno le cose ---- *\/\\n    --ry-vs-cols-text: 2 \/ span 5;    \/* titolo, riga e testo: dalla colonna 2 alla 6 *\/\\n    --ry-vs-cols-media: 8 \/ span 3;   \/* immagine: dalla colonna 7 alla 11 (span 6 per arrivare al bordo destro) *\/\\n\\n    \/* ---- tablet e mobile ---- *\/\\n    --ry-vs-gutter-m: 40px;           \/* spazio a sinistra del contenuto per linea e numero *\/\\n    --ry-vs-rail-m: 40vh;             \/* lunghezza della linea (non c'e' l'immagine a darle l'altezza) *\/\\n    --ry-vs-figure-w: 700px;          \/* immagine di ogni step: larghezza massima ... *\/\\n    --ry-vs-figure-ratio: 700 \/ 350;  \/* ... e proporzioni (500x350) *\/\\n\\n    \/* ---- testata fissa sopra lo slider (solo desktop) ---- *\/\\n    --ry-vs-head-top: 60px;            \/* distanza dal bordo alto del viewport quando e' fissa (es. altezza del menu) *\/\\n    --ry-vs-head-gap: 70px;           \/* spazio fra il paragrafo della testata e la quota di immagine e linea: e' anche il tratto in cui il testo che sale sfuma *\/\\n    --ry-vs-head-bg: transparent;     \/* sfondo della testata fissa; se resta transparent il JS usa il colore del contenitore *\/\\n\\n    \/* ---- colori e font (allineati al sito) ---- *\/\\n    --ry-vs-ink: #192b35;                       \/* linea piena, numero, riga *\/\\n    --ry-vs-ink-soft: rgba(25, 43, 53, 0.2);    \/* linea di sfondo *\/\\n    --ry-vs-badge-text: #fff;\\n    --ry-vs-font-title: 'Aptos-Light', 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n    --ry-vs-font-strong: 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n    --ry-vs-font-text: 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n\\n    position: relative;\\n    padding: 0 var(--ry-vs-inset);\\n    color: var(--ry-vs-ink);\\n  }\\n\\n  \/* ---------- Testata: eyebrow, titolo e, a destra, divisore, etichetta e\\n     paragrafo. Usa le classi del tema. Su desktop resta fissa in alto per\\n     tutta la section (sticky) e lo slider le scorre sotto: la quota di\\n     aggancio di immagine e linea e' il suo bordo inferiore. ---------- *\/\\n  .ry-vslider__headwrap { position: relative; z-index: 3; }\\n  .ry-vslider__head {\\n    position: relative;\\n    padding-bottom: var(--ry-vs-head-gap);\\n  }\\n  .ry-vslider__head-row {\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n  }\\n  .ry-vslider__head-right { grid-column: 7 \/ span 6; }\\n  @media (max-width: 1023.98px) {\\n    .ry-vslider__head-right { grid-column: 1 \/ -1; }\\n  }\\n  @media (min-width: 1024px) {\\n    \/* Il wrapper esce dal flusso (gli step ricevono dal JS un padding-top\\n       pari all'altezza della testata) e diventa il binario dello sticky:\\n       alto fino all'ultimo step, misurato dal JS. *\/\\n    .ry-vslider.is-ready .ry-vslider__headwrap {\\n      position: absolute;\\n      top: 0;\\n      left: var(--ry-vs-inset);\\n      right: var(--ry-vs-inset);\\n      pointer-events: none;\\n    }\\n    .ry-vslider.is-ready .ry-vslider__head {\\n      position: sticky;\\n      top: var(--ry-vs-head-top);\\n      background-color: var(--ry-vs-head-bg);\\n      background-clip: content-box;   \/* lo sfondo si ferma al paragrafo: nello spazio sotto il testo sfuma, non viene tagliato *\/\\n      pointer-events: auto;\\n    }\\n  }\\n\\n  \/* ---------- Step (colonna testo) ---------- *\/\\n  .ry-vslider__items { position: relative; z-index: 1; }\\n\\n  .ry-vslider__item {\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n    margin: 0 0 var(--ry-vs-space-m);\\n    padding: 0;\\n  }\\n  .ry-vslider__item:last-child { margin-bottom: 0; }\\n\\n  .ry-vslider__figure {\\n    grid-column: 1 \/ -1;\\n    margin: 0 0 20px;\\n    overflow: hidden;\\n  }\\n  .ry-vslider__figure img {\\n    display: block;\\n    width: 100%;\\n    height: auto;\\n    aspect-ratio: var(--ry-vs-ratio);\\n    object-fit: cover;\\n  }\\n\\n  .ry-vslider__body { grid-column: 1 \/ -1; position: relative; }\\n\\n\\n  .ry-vslider__num,\\n  .ry-vslider__badge span {\\n   display: inline-flex;\\n    align-items: center;\\n    justify-content: center;\\n    width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n    border-radius: 3px;\\n        background:#DCE8E2;\\n  border:1px solid #3E6F62;\\n          font-weight: 600;\\n    color: #3E6F62;\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 14px;\\n    line-height: 14px;\\n      width: 22px;\\n    height: 22px;\\n    letter-spacing: 0;\\n    \/*width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n    background: var(--ry-vs-ink);\\n    color: var(--ry-vs-badge-text);\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 12px;\\n    line-height: 12px;\\n    letter-spacing: 0;\\n         \/* width: 28px;\\n    height: 28px;\\n    border: 2px solid #F1F4F0;\\n    border-radius: 5px;\\n    background-color: #3e6f62;\\n    color: #F1F4F0;\\n    font-size: calc(8.57px + 0.446429vw);\\n    font-weight: 600;\\n    line-height: 1;\\n    opacity: 0.2;\\n    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;*\/\\n}\\n\\n  .ry-vslider__num { margin: 0 0 20px; }\\n\\n  .ry-vslider__title {\\n    margin: 0px;\\n    font-family: var(--ry-vs-font-title);\\n    font-weight: 300!important;\\n      font-family: \\\"Aptos-Light\\\";\\n    font-size: 32px;\\n    line-height: 36px;\\n    letter-spacing: -0.03em;\\n    color: inherit;\\n  }\\n  .ry-vslider__title strong {\\n    font-family: var(--ry-vs-font-strong);\\n    font-weight: 300;\\n  }\\n\\n  .ry-vslider__line {\\n    width: 0;\\n    height: 1px;\\n    margin: 0 0 2px;\\n    background: var(--ry-vs-ink);\\n    transition: width 1.8s;\\n  }\\n  .ry-vslider__line{\\n    max-width:700px;\\n  }\\n    .ry-vslider__title, .ry-vslider__text{\\nmax-width:540px;\\n}\\n  .ry-vslider__line.is-in { width: 100%; }\\n\\n  .ry-vslider__text {\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 20px;\\n    letter-spacing: -0.03em;\\n      line-height:30px;\\n  }\\n  .ry-vslider__text p { margin: 0; }\\n  .ry-vslider__text p + p { margin-top: 1em; }\\n\\n  \/* Reveal di titolo e testo: entrano dal basso con fade (1.2s come il reference) *\/\\n  .ry-vslider__reveal {\\n    opacity: 0;\\n    transform: translateY(30px);\\n    transition: transform 1.2s, opacity 0.6s;\\n  }\\n  .ry-vslider__reveal.is-in { opacity: 1; transform: translate(0, 0); }\\n\\n  \/* ---------- Palco agganciato (solo desktop, riempito e pinnato dal JS) ---------- *\/\\n  .ry-vslider__track {\\n    display: none;\\n    position: absolute;\\n    top: 0;\\n    bottom: 0;\\n    left: var(--ry-vs-inset);\\n    right: var(--ry-vs-inset);\\n    z-index: 2;\\n    pointer-events: none;\\n  }\\n  .ry-vslider.is-ready .ry-vslider__track { display: block; }\\n  .ry-vslider.is-ready .ry-vslider__num { display: none; }   \/* il numero sta sulla linea *\/\\n  .ry-vslider__stage {\\n    position: relative;\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n    will-change: transform;\\n  }\\n  \/* Aggancio con position: sticky: lo tiene fermo il browser (compositor),\\n     quindi niente tremolio su touch, dove lo scroll non passa da JS.\\n     La classe la mette il JS; il binario (.ry-vslider__track) riceve dal JS\\n     l'altezza esatta, cosi' lo sgancio avviene quando l'ultimo step arriva\\n     alla quota. Senza is-sticky resta il pin a transform di ScrollTrigger. *\/\\n  .ry-vslider.is-sticky .ry-vslider__stage {\\n    position: sticky;\\n    top: var(--ry-vs-top);\\n  }\\n  .ry-vslider__gutter { grid-column: 1 \/ span 1; position: relative; }\\n\\n  \/* Linea verticale: centrata sul numero, sul bordo sinistro della colonna 1 *\/\\n  .ry-vslider__rail {\\n    position: absolute;\\n    top: 0;\\n    left: calc(var(--ry-vs-badge-x) + var(--ry-vs-badge) \/ 2 - 0.5px + var(--ry-vs-rail-shift));\\n    width: 1px;\\n    height: var(--ry-vs-rail-h);\\n    background: var(--ry-vs-ink-soft);\\n  }\\n  .ry-vslider__rail-fill {\\n    position: absolute;\\n    top: 0;\\n    left: -0.5px;\\n    width: 2px;\\n    height: 0;\\n    background: var(--ry-vs-ink);\\n  }\\n\\n  \/* Numero: i 6 span sono sovrapposti, si accende quello dello step corrente *\/\\n  .ry-vslider__badge {\\n    position: absolute;\\n    top: 0;\\n    left: var(--ry-vs-badge-x);\\n    width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n  }\\n  .ry-vslider__badge span {\\n    position: absolute;\\n    inset: 0;\\n    opacity: 0;\\n  }\\n  .ry-vslider__badge span.is-on { opacity: 1; }\\n\\n  \/* Pila immagini: entra con scale 0.5 -> 1 (stessa curva del reference) *\/\\n  .ry-vslider__media {\\n    grid-column: var(--ry-vs-cols-media);\\n    position: relative;\\n    aspect-ratio: var(--ry-vs-ratio);\\n    overflow: hidden;\\n    transform: scale(0.5);\\n    transition: transform 1.5s cubic-bezier(0.17, 0.84, 0.53, 0.86);\\n  }\\n  .ry-vslider__media.is-in { transform: scale(1); }\\n\\n  \/* Pila: contiene tutte le slide. Durante lo scambio riceve dal JS il\\n     filtro SVG di displacement (dissolvenza liquida) e un leggero zoom,\\n     che tiene i bordi deformati fuori dal ritaglio della cornice. *\/\\n  .ry-vslider__stack {\\n    position: absolute;\\n    inset: 0;\\n    transform-origin: center center;\\n    will-change: transform;\\n  }\\n  .ry-vslider__slide,\\n  .ry-vslider__zoom,\\n  .ry-vslider__blur {\\n    position: absolute;\\n    inset: 0;\\n  }\\n  .ry-vslider__slide { overflow: hidden; }\\n  \/* Le immagini dopo la prima partono trasparenti: ognuna si dissolve\\n     sopra la precedente (via GSAP, legata allo scroll). *\/\\n  .ry-vslider__slide:not(:first-child) { opacity: 0; }\\n  .ry-vslider__zoom { transform-origin: center center; }\\n\\n  .ry-vslider__slide img {\\n    position: absolute;\\n    inset: 0;\\n    width: 100%;\\n    height: 100%;\\n    object-fit: cover;\\n    opacity: 0;\\n    filter: blur(8px);\\n    transition: opacity 0.4s cubic-bezier(0.17, 0.84, 0.53, 0.86), filter 1.5s;\\n  }\\n  .ry-vslider__media.is-in .ry-vslider__slide img { opacity: 1; filter: blur(0px); }\\n\\n  \/* ---------- Marker: box dentro lo stage pinnato, allineato alla media\\n     dal JS. Seguono la pila come le immagini (fermi durante il pin, poi\\n     via con lei). Appesi allo stage, che non ha overflow hidden, cosi'\\n     le --y negative non vengono tagliate. ---------- *\/\\n  .ry-vslider__markers {\\n    display: none;\\n    position: absolute;\\n    z-index: 3;\\n    pointer-events: none;\\n  }\\n  .ry-vslider.is-ready .ry-vslider__markers { display: block; }\\n  @media (max-width: 1023.98px) {\\n    .ry-vslider__markers { display: none !important; }\\n  }\\n\\n  @media (min-width: 640px) {\\n    .ry-vslider { --ry-vs-inset: 30px; }\\n  }\\n  @media (min-width: 960px) {\\n    .ry-vslider { --ry-vs-inset: 40px; }\\n  }\\n\\n  \/* ---------- Tablet e mobile: linea e numeri a sinistra (agganciati\\n     allo scroll come su desktop), immagine 500x350 sopra al titolo,\\n     poi titolo e testo. La pila immagini non c'e'. ---------- *\/\\n  @media (max-width: 1023.98px) {\\n    \/* Solo gli step lasciano spazio a linea e numero: la testata resta a\\n       tutta larghezza, allineata al resto della pagina. *\/\\n    .ry-vslider.is-ready .ry-vslider__items { padding-left: var(--ry-vs-gutter-m); }\\n    .ry-vslider.is-ready .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\\n    .ry-vslider.is-ready .ry-vslider__item--last { margin-bottom: 0px; padding-top: 80px;}\\n\\n    .ry-vslider__figure { width: 100%; max-width: var(--ry-vs-figure-w); }\\n    .ry-vslider__figure img { aspect-ratio: var(--ry-vs-figure-ratio); }\\n\\n    .ry-vslider__stage { display: block; }\\n    .ry-vslider__gutter { height: var(--ry-vs-rail-m); }\\n    .ry-vslider__media { display: none; }\\n\\n    .ry-vslider__title {\\n      margin-bottom: 10px;\\n    }\\n\\n  .ry-vslider__line {\\n  margin-bottom: 20px;\\n  }\\n  }\\n\\n  \/* ---------- Desktop ---------- *\/\\n  @media (min-width: 1024px) {\\n    .ry-vslider__item { margin-bottom: var(--ry-vs-space); }\\n    .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\\n    .ry-vslider__item--last { margin-bottom: 0; padding-top: 60px; }\\n\\n    .ry-vslider__body { grid-column: var(--ry-vs-cols-text); grid-row: 1; }\\n    \/* Senza JS l'immagine di ogni step resta visibile a destra (fallback statico) *\/\\n    .ry-vslider__figure { grid-column: var(--ry-vs-cols-media); grid-row: 1; margin: 0; }\\n    .ry-vslider.is-ready .ry-vslider__figure { display: none; }\\n\\n    .ry-vslider__title {\\n      margin-bottom: 10px;\\n      \/*font-size: clamp(38px, 3.2vw, 62px);*\/\\n      \/*line-height: clamp(42px, 3.475vw, 68px);*\/\\n    }\\n    .ry-vslider__line { margin-bottom: 40px; }\\n  }\\n\\n  \/* ---------- Motion ridotta: solo fade brevi, niente slide\/blur\/scale ---------- *\/\\n  @media (prefers-reduced-motion: reduce) {\\n    .ry-vslider__reveal { transform: none; transition: opacity 0.3s; }\\n    .ry-vslider__line { transition: none; }\\n    .ry-vslider__media { transform: none; transition: none; }\\n    .ry-vslider__slide img { filter: none; transition: opacity 0.3s; }\\n  }\\n\\n  \/* ---------- Marker (stile): incollato dal CSS globale del sito, qui\\n     replicato per completezza del blocco. ---------- *\/\\n  .rt-marker {\\n    position: absolute;\\n    left: var(--x);\\n    top: var(--y);\\n    width: 32px;\\n    height: 32px;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    border-radius: 4px;\\n    border: 1px solid rgba(255, 255, 255, .35);\\n    background-color: rgba(241, 244, 240, 0.5);\\n    -webkit-backdrop-filter: blur(4px);\\n    backdrop-filter: blur(4px);\\n    color: #192B35;\\n    pointer-events: none;\\n  }\\n  .rt-marker::before {\\n    content: \\\"\\\";\\n    width: 8px;\\n    height: 8px;\\n    border-radius: 100%;\\n    background-color: currentColor;\\n  }\\n  .padding-testo{\\n    padding-top: 10px;\\n  }\\n<\/style>\n<p>\\n\\n<\/p>\n<section class=\\\"ry-vslider\\\" id=\\\"ry-vslider\\\">\\n\\n  <!-- Testata fissa (desktop): stessi elementi e classi del builder.\\n       Il wrapper e' il binario della testata: il JS lo fa finire dove\\n       arriva l'ultimo step, cosi' testata, immagine e ultimo testo si\\n       sganciano insieme e restano visibili fino alla fine. -->\\n  <\/p>\n<div class=\\\"ry-vslider__headwrap\\\">\\n  <\/p>\n<div class=\\\"ry-vslider__head\\\">\\n    <\/p>\n<div class=\\\"uk-h5 uk-text-primary uk-margin-small-bottom uk-width-small\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\">[ 06. ]<\/div>\n<p>\\n    <\/p>\n<h3 class=\\\"uk-heading-large ry-blur uk-margin-remove-top\\\">Dal brief all\u2019output,<br class=\\\"uk-visible@m\\\">ogni fase ha un metodo.<\/h3>\n<p>\\n    <\/p>\n<div class=\\\"ry-vslider__head-row\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__head-right\\\">\\n        <\/p>\n<div>\n<div class=\\\"divider is-visible\\\"><\/div>\n<\/div>\n<p>\\n        <\/p>\n<div class=\\\"uk-h6 uk-margin\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\"><span class=\\\"label-dot\\\">Metodo scientifico e partnership<\/span><\/div>\n<p>\\n        <\/p>\n<div class=\\\"uk-panel paragrafo padding-testo testi-effect uk-margin-default-top uk-text-left\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\">Reytera trasforma un\u2019esigenza industriale in un percorso condiviso di sviluppo. Competenze botaniche, estrattive e analitiche accompagnano il progetto fino a un output verificato rispetto alle specifiche condivise.<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n\\n  <!-- Palco sticky: lo riempie il JS (linea, numeri, pila immagini) -->\\n  <\/p>\n<div class=\\\"ry-vslider__track\\\" aria-hidden=\\\"true\\\">\\n    <\/p>\n<div class=\\\"ry-vslider__stage\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__gutter\\\">\\n        <\/p>\n<div class=\\\"ry-vslider__rail\\\">\n<div class=\\\"ry-vslider__rail-fill\\\"><\/div>\n<\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__badge\\\"><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__media\\\"><\/div>\n<p>\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n\\n  <\/p>\n<div class=\\\"ry-vslider__items\\\">\\n\\n    <!-- SEGNAPOSTO: testi e immagini dei 6 step sono di esempio -->\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/brief-2-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">1<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal uk-h2\\\">Brief con cliente<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Definiamo obiettivi, formato, performance attese e principali vincoli tecnici e industriali del progetto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/Botanist_2.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">2<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Sviluppo botanico<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Selezioniamo la botanica e definiamo il protocollo agronomico pi\u00f9 coerente con il profilo richiesto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/Definizione-del-processo-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">3<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Definizione del processo<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Costruiamo il percorso pi\u00f9 coerente con la matrice e con l\u2019output richiesto: fresco, essiccato o estratto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/defenizione-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">4<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Analisi e caratterizzazione<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Analizziamo e caratterizziamo l\u2019output per verificarne i parametri rilevanti rispetto alle specifiche del progetto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire -->\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/validazzione-img-1.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">5<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Validazione<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Confrontiamo i risultati con le specifiche condivise e, quando necessario, perfezioniamo il processo fino alla validazione finale.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire -->\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/output-finale-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">6<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Output finale<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Il percorso si conclude con un output controllato, caratterizzato e sviluppato per integrarsi nel processo industriale del cliente.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n  <\/p><\/div>\n<p>\\n<\/section>\n<p>\\n\\n<script>\\n(function () {\\n  'use strict';\\n\\n  \/* Nota di stile: niente doppia e-commerciale, niente segno \\\"minore di\\\"\\n     e niente backslash nel JS, cosi' il blocco HTML del builder arriva\\n     in pagina integro (i cicli usano \\\"n > i\\\", le condizioni if annidati). *\/\\n\\n  var ROOT_SEL = '.ry-vslider';\\n  var DESKTOP_MQ = '(min-width: 1024px)';   \/* stessa soglia del CSS *\/\\n  var MOBILE_MQ = '(max-width: 1023.98px)';\\n  var SWAP_AT = 10;        \/* % viewport: lo step inizia a cedere l'immagine quando il suo top e' a 10vh *\/\\n  var TEXT_IN_WINDOW = 12; \/* % viewport: senza testata fissa, tratto oltre la quota in cui il testo corrente sparisce e appare il successivo (con la testata vale --ry-vs-head-gap) *\/\\n  var SWAP_LEN = 15;       \/* % viewport: con la testata fissa, lunghezza dello scambio immagine (parte quando il testo comincia a sfumare) *\/\\n  \/* Dissolvenza liquida (solo desktop): filtro SVG feTurbulence + feDisplacementMap *\/\\n  var LIQUID_PEAK = 60;              \/* intensita' massima dello spostamento (attributo scale del displacement), a meta' scambio *\/\\n  var LIQUID_ZOOM = 1.1;             \/* zoom della pila a meta' scambio: tiene i bordi deformati fuori dalla cornice *\/\\n  var LIQUID_FREQ = '0.012 0.018';   \/* frequenza della turbolenza (piu' bassa = onde piu' larghe) *\/\\n  var LIQUID_OCTAVES = 2;\\n  var MOBILE_DIM = 0.5;    \/* tablet e mobile: opacita' a cui si attenua il blocco (immagine + testo) che sale oltre il numero *\/\\n  var MOBILE_DIM_RANGE = 20; \/* % viewport: tratto oltre la quota in cui avviene l'attenuazione *\/\\n  var REVEAL_AT = 'top 90%';\\n\\n  \/* Marker: coordinate x\/y (le classi uk-visible@s \/ uk-hidden@s\\n     restano nel markup per lo switch di breakpoint UIkit). *\/\\n  var MARKERS_HTML =\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:43%; --y:0px; \\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:-5px; --y:120px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:69%; --y:220px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:65%; --y:-280px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>';\\n\\n  if (window.ryVsliderAttivo) { return; }\\n  window.ryVsliderAttivo = true;\\n\\n  \/* GSAP e ScrollTrigger dovrebbero esserci gia' (tema\/plugin). Se dopo\\n     il load mancano ancora, si caricano da CDN come rete di sicurezza. *\/\\n  var gsapLoading = false;\\n  function hasGsap() {\\n    if (typeof gsap === 'undefined') { return false; }\\n    if (typeof ScrollTrigger === 'undefined') { return false; }\\n    return true;\\n  }\\n  function ensureGsap(done) {\\n    if (hasGsap()) { return done(); }\\n    if (document.readyState !== 'complete') {\\n      window.addEventListener('load', function () { ensureGsap(done); }, { once: true });\\n      return;\\n    }\\n    if (gsapLoading) { return; }\\n    gsapLoading = true;\\n    var base = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/';\\n    function load(src, next) {\\n      var s = document.createElement('script');\\n      s.src = base + src;\\n      s.onload = next;\\n      document.head.appendChild(s);\\n    }\\n    load('gsap.min.js', function () { load('ScrollTrigger.min.js', done); });\\n  }\\n\\n  \/* Lenis: sul sito e' creato in uno script inline con \\\"const lenis = new\\n     Lenis(...)\\\": non sta su window, ma una const globale e' visibile\\n     anche da qui. Agganciando ScrollTrigger.update al suo evento\\n     \\\"scroll\\\", il pin viene aggiornato nello stesso frame in cui Lenis\\n     muove la pagina: senza questo aggancio ScrollTrigger reagirebbe\\n     all'evento scroll nativo un frame dopo, e la linea da 1px tremerebbe. *\/\\n  function findLenis() {\\n    if (window.lenis) { return window.lenis; }\\n    try {\\n      if (typeof lenis !== 'undefined') { return lenis; }\\n    } catch (e) { \/* const ancora non inizializzata: nessun Lenis *\/ }\\n    return null;\\n  }\\n  function integrateLenis() {\\n    var instance = findLenis();\\n    if (!instance) { return window; }\\n    if (typeof instance.on !== 'function') { return window; }\\n\\n    var wrapper = window;\\n    if (instance.options) { if (instance.options.wrapper) { wrapper = instance.options.wrapper; } }\\n    var isWindowScroll = false;\\n    if (wrapper === window) { isWindowScroll = true; }\\n    if (wrapper === document.documentElement) { isWindowScroll = true; }\\n    if (wrapper === document.body) { isWindowScroll = true; }\\n\\n    if (isWindowScroll) {\\n      instance.on('scroll', ScrollTrigger.update);\\n      console.log('[ry-vslider] Lenis sincronizzato con ScrollTrigger');\\n      return window;\\n    }\\n\\n    ScrollTrigger.scrollerProxy(wrapper, {\\n      scrollTop: function (value) {\\n        if (arguments.length) { instance.scrollTo(value, { immediate: true }); }\\n        return instance.scroll || 0;\\n      },\\n      getBoundingClientRect: function () {\\n        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };\\n      },\\n      pinType: wrapper.style.transform ? 'transform' : 'fixed'\\n    });\\n    instance.on('scroll', ScrollTrigger.update);\\n    ScrollTrigger.defaults({ scroller: wrapper });\\n    return wrapper;\\n  }\\n\\n  function toArray(list) { return Array.prototype.slice.call(list); }\\n\\n  function make(tag, className) {\\n    var node = document.createElement(tag);\\n    if (className) { node.className = className; }\\n    return node;\\n  }\\n\\n  \/* Filtro SVG per la dissolvenza liquida: turbolenza (rumore statico) +\\n     displacement map con scale 0; il JS anima scale durante lo scambio.\\n     Creato via DOM (niente markup), un filtro per sezione. *\/\\n  var SVG_NS = 'http:\/\/www.w3.org\/2000\/svg';\\n  var liquidCount = 0;\\n  function buildLiquidFilter(root) {\\n    liquidCount += 1;\\n    var id = 'ry-liquid-' + liquidCount;\\n    var svg = document.createElementNS(SVG_NS, 'svg');\\n    svg.setAttribute('width', '0');\\n    svg.setAttribute('height', '0');\\n    svg.setAttribute('aria-hidden', 'true');\\n    svg.style.position = 'absolute';\\n    var filter = document.createElementNS(SVG_NS, 'filter');\\n    filter.setAttribute('id', id);\\n    filter.setAttribute('x', '-20%');\\n    filter.setAttribute('y', '-20%');\\n    filter.setAttribute('width', '140%');\\n    filter.setAttribute('height', '140%');\\n    filter.setAttribute('color-interpolation-filters', 'sRGB');\\n    var turb = document.createElementNS(SVG_NS, 'feTurbulence');\\n    turb.setAttribute('type', 'fractalNoise');\\n    turb.setAttribute('baseFrequency', LIQUID_FREQ);\\n    turb.setAttribute('numOctaves', String(LIQUID_OCTAVES));\\n    turb.setAttribute('seed', '7');\\n    turb.setAttribute('result', 'noise');\\n    var disp = document.createElementNS(SVG_NS, 'feDisplacementMap');\\n    disp.setAttribute('in', 'SourceGraphic');\\n    disp.setAttribute('in2', 'noise');\\n    disp.setAttribute('scale', '0');\\n    disp.setAttribute('xChannelSelector', 'R');\\n    disp.setAttribute('yChannelSelector', 'G');\\n    filter.appendChild(turb);\\n    filter.appendChild(disp);\\n    svg.appendChild(filter);\\n    root.appendChild(svg);\\n    return { id: id, disp: disp };\\n  }\\n\\n  \/* Costruisce il palco: una slide per step (clone dell'immagine dello\\n     step) dentro la pila, un numero per step, e le classi penultimo\/ultimo. *\/\\n  function build(root, items) {\\n    var media = root.querySelector('.ry-vslider__media');\\n    var badge = root.querySelector('.ry-vslider__badge');\\n    var count = items.length;\\n    var slides = [];\\n    var nums = [];\\n    var stack = make('div', 'ry-vslider__stack');\\n    media.appendChild(stack);\\n\\n    items.forEach(function (item, i) {\\n      var source = item.querySelector('.ry-vslider__figure img');\\n      var slide = make('div', 'ry-vslider__slide');\\n      var zoom = make('div', 'ry-vslider__zoom');\\n      var blur = make('div', 'ry-vslider__blur');\\n      var img = source ? source.cloneNode(true) : make('img');\\n      slide.style.zIndex = String(i + 1);   \/* ogni immagine si dissolve sopra la precedente *\/\\n      if (i === 0) { img.setAttribute('loading', 'eager'); }\\n      img.setAttribute('alt', '');\\n      blur.appendChild(img);\\n      zoom.appendChild(blur);\\n      slide.appendChild(zoom);\\n      stack.appendChild(slide);\\n      slides.push(slide);\\n\\n      var num = make('span', i === 0 ? 'is-on' : '');\\n      num.textContent = String(i + 1);\\n      badge.appendChild(num);\\n      nums.push(num);\\n    });\\n\\n    if (count > 1) { items[count - 2].classList.add('ry-vslider__item--penult'); }\\n    items[count - 1].classList.add('ry-vslider__item--last');\\n\\n    return { slides: slides, nums: nums, stack: stack };\\n  }\\n\\n  function setup(root, scroller, reduced) {\\n    var items = toArray(root.querySelectorAll('.ry-vslider__item'));\\n    var count = items.length;\\n    if (count === 0) { return; }\\n\\n    var built = build(root, items);\\n    var slides = built.slides;\\n    var nums = built.nums;\\n    var stack = built.stack;\\n    var liquid = null;\\n    if (!reduced) { liquid = buildLiquidFilter(root); }\\n    var track = root.querySelector('.ry-vslider__track');\\n    var stage = root.querySelector('.ry-vslider__stage');\\n    var media = root.querySelector('.ry-vslider__media');\\n    var fill = root.querySelector('.ry-vslider__rail-fill');\\n    var lastBody = items[count - 1].querySelector('.ry-vslider__body');\\n    var itemsEl = root.querySelector('.ry-vslider__items');\\n    var head = root.querySelector('.ry-vslider__head');\\n    var headwrap = root.querySelector('.ry-vslider__headwrap');\\n    root.classList.add('is-ready');\\n\\n    \/* Testata fissa: se non ha un colore di sfondo suo, prende quello del\\n       primo contenitore che ne ha uno, cosi' i testi che le scorrono sotto\\n       spariscono davvero. *\/\\n    if (head) {\\n      var headBg = getComputedStyle(head).backgroundColor;\\n      var isClear = false;\\n      if (headBg === 'transparent') { isClear = true; }\\n      if (headBg === 'rgba(0, 0, 0, 0)') { isClear = true; }\\n      if (isClear) {\\n        var bgEl = root;\\n        while (bgEl) {\\n          if (bgEl === document.documentElement) { break; }\\n          var c = getComputedStyle(bgEl).backgroundColor;\\n          if (c !== 'transparent') { if (c !== 'rgba(0, 0, 0, 0)') { head.style.backgroundColor = c; break; } }\\n          bgEl = bgEl.parentElement;\\n        }\\n      }\\n    }\\n\\n    \/* Modalita' di aggancio. Default: position sticky (nessun tremolio su\\n       touch: lo scroll del compositor e lo sticky sono nello stesso frame,\\n       il pin a transform arriva un frame dopo). Lo sticky si annulla\\n       dentro un antenato con overflow hidden: quegli antenati passano a\\n       overflow clip, che ritaglia uguale ma non blocca lo sticky.\\n       data-ry-pin=\\\"transform\\\" sulla section forza il vecchio pin. *\/\\n    var useSticky = root.getAttribute('data-ry-pin') !== 'transform';\\n    if (useSticky) {\\n      if (!window.CSS) { useSticky = false; }\\n      else if (!CSS.supports('overflow', 'clip')) { useSticky = false; }\\n    }\\n    if (useSticky) {\\n      var anc = root.parentElement;\\n      while (anc) {\\n        if (anc === document.body) { break; }\\n        var ov = getComputedStyle(anc);\\n        if (ov.overflowX === 'hidden') { anc.style.overflowX = 'clip'; }\\n        if (ov.overflowY === 'hidden') { anc.style.overflowY = 'clip'; }\\n        anc = anc.parentElement;\\n      }\\n      root.classList.add('is-sticky');\\n    }\\n\\n    \/* Marker dentro il palco pinnato (.ry-vslider__stage): seguono la pila\\n       come le immagini (fermi durante il pin, poi via con lei). Allineati\\n       alla colonna media, ma appesi allo stage (che non ha overflow hidden)\\n       cosi' le --y negative non vengono tagliate. *\/\\n    var markers = make('div', 'ry-vslider__markers');\\n    markers.innerHTML = MARKERS_HTML;\\n    stage.appendChild(markers);\\n\\n    function placeMarkers() {\\n      var mediaRect = media.getBoundingClientRect();\\n      var stageRect = stage.getBoundingClientRect();\\n      markers.style.left = (mediaRect.left - stageRect.left) + 'px';\\n      markers.style.top = (mediaRect.top - stageRect.top) + 'px';\\n      markers.style.width = mediaRect.width + 'px';\\n      markers.style.height = mediaRect.height + 'px';\\n    }\\n    placeMarkers();\\n    ScrollTrigger.addEventListener('refresh', placeMarkers);\\n    window.addEventListener('resize', placeMarkers);\\n\\n    \/* ---- Reveal (tutti i breakpoint): titolo, testo, riga ---- *\/\\n    var revealEls = toArray(root.querySelectorAll('.ry-vslider__reveal, .ry-vslider__line'));\\n    revealEls.forEach(function (el) {\\n      if (reduced) { el.classList.add('is-in'); return; }\\n      ScrollTrigger.create({\\n        trigger: el,\\n        scroller: scroller,\\n        start: REVEAL_AT,\\n        once: true,\\n        onEnter: function () { el.classList.add('is-in'); }\\n      });\\n    });\\n\\n    \/* ---- Aggancio, linea e numeri su tutti i breakpoint; su desktop\\n       anche la pila immagini con le transizioni ---- *\/\\n    var mm = gsap.matchMedia();\\n    mm.add(DESKTOP_MQ, function () { return setupPinned(true); });\\n    mm.add(MOBILE_MQ, function () { return setupPinned(false); });\\n\\n    \/* Primo elemento visibile di uno step: su tablet\/mobile l'immagine\\n       (sta sopra al titolo), su desktop il blocco testo (l'immagine del\\n       singolo step e' nascosta, c'e' la pila). E' il riferimento per\\n       accendere il numero e per la fine dell'aggancio. *\/\\n    function contentTop(item, isDesktop) {\\n      var body = item.querySelector('.ry-vslider__body');\\n      if (isDesktop) { return body; }\\n      return item.querySelector('.ry-vslider__figure') || body;\\n    }\\n\\n    function setupPinned(isDesktop) {\\n      var lastTop = contentTop(items[count - 1], isDesktop);\\n\\n      \/* Quota di aggancio in px, dalla variabile --ry-vs-top (vh, % o px) *\/\\n      function stickPx() {\\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-top').trim();\\n        var n = parseFloat(raw);\\n        if (isNaN(n)) { return window.innerHeight * 0.2; }\\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\\n        if (raw.indexOf('%') > -1) { return window.innerHeight * n \/ 100; }\\n        return n;\\n      }\\n      function stickStart() { return 'top ' + stickPx() + 'px'; }\\n      \/* Quota della testata fissa in px (variabile --ry-vs-head-top) *\/\\n      function headTopPx() {\\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-head-top').trim();\\n        var n = parseFloat(raw);\\n        if (isNaN(n)) { return 0; }\\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\\n        return n;\\n      }\\n\\n      \/* Prima di ogni misura di ScrollTrigger:\\n         1) gli antenati con transform (es. il pannello con uk-parallax\\n            \\\"scale: 0.9,1\\\") vengono azzerati, altrimenti start, end e\\n            dimensioni del pin escono scalati o spostati. Vengono\\n            ripristinati appena la misura e' finita;\\n         2) l'ultimo step e' alto almeno quanto il palco (immagine su\\n            desktop, linea su mobile), cosi' il palco una volta sganciato\\n            non sporge sotto la section. *\/\\n      var transformed = [];\\n      function beforeMeasure() {\\n        transformed = [];\\n        var el = root.parentElement;\\n        while (el) {\\n          if (el === document.body) { break; }\\n          if (getComputedStyle(el).transform !== 'none') {\\n            transformed.push({ el: el, inline: el.style.transform });\\n            el.style.transform = 'none';\\n          }\\n          el = el.parentElement;\\n        }\\n        var offset = lastBody.getBoundingClientRect().top - lastTop.getBoundingClientRect().top;\\n        lastBody.style.minHeight = Math.max(0, Math.round(stage.offsetHeight - offset)) + 'px';\\n        \/* Con la testata fissa (desktop): la quota di aggancio e' il suo\\n           bordo inferiore; gli step partono sotto di lei (padding-top);\\n           il suo binario finisce dove arriva l'ultimo step, cosi' si\\n           sgancia nello stesso istante del palco e da li' testata,\\n           immagine e ultimo testo scorrono insieme. Il binario del palco\\n           parte dal primo step, non dalla cima della section. *\/\\n        var rootTop = root.getBoundingClientRect().top;\\n        if (isDesktop) {\\n          if (head) {\\n            var headH = head.offsetHeight;\\n            root.style.setProperty('--ry-vs-top', Math.round(headH + headTopPx()) + 'px');\\n            itemsEl.style.paddingTop = headH + 'px';\\n            if (headwrap) { headwrap.style.height = Math.round(lastTop.getBoundingClientRect().top - rootTop) + 'px'; }\\n          }\\n        } else {\\n          root.style.removeProperty('--ry-vs-top');\\n          itemsEl.style.paddingTop = '';\\n          if (headwrap) { headwrap.style.height = ''; }\\n        }\\n        var itemsTop = items[0].getBoundingClientRect().top;\\n        track.style.top = Math.round(itemsTop - rootTop) + 'px';\\n        \/* Sticky: il binario finisce dove il contenuto dell'ultimo step\\n           arriva alla quota, piu' l'altezza del palco (sgancio esatto). *\/\\n        if (useSticky) {\\n          var trackEnd = lastTop.getBoundingClientRect().top - itemsTop + stage.offsetHeight;\\n          track.style.bottom = 'auto';\\n          track.style.height = Math.round(trackEnd) + 'px';\\n        }\\n      }\\n      function afterMeasure() {\\n        transformed.forEach(function (t) { t.el.style.transform = t.inline; });\\n        transformed = [];\\n      }\\n      ScrollTrigger.addEventListener('refreshInit', beforeMeasure);\\n      ScrollTrigger.addEventListener('refresh', afterMeasure);\\n\\n      \/* Aggancio del palco senza sticky (solo se forzato o se il browser\\n         non supporta overflow clip): pin di ScrollTrigger dalla quota\\n         --ry-vs-top fino a quando il contenuto dell'ultimo step arriva\\n         alla stessa quota. pinSpacing false: il palco vive in un overlay\\n         assoluto, non deve aggiungere spazio. *\/\\n      if (!useSticky) {\\n        ScrollTrigger.create({\\n          trigger: itemsEl,\\n          scroller: scroller,\\n          start: stickStart,\\n          endTrigger: lastTop,\\n          end: stickStart,\\n          pin: stage,\\n          pinSpacing: false,\\n          pinType: 'transform'\\n        });\\n      }\\n\\n      \/* Linea: si riempie da quando il palco si aggancia a quando si sgancia *\/\\n      gsap.fromTo(fill, { height: '0%' }, {\\n        height: '100%',\\n        ease: 'none',\\n        scrollTrigger: {\\n          trigger: itemsEl,\\n          scroller: scroller,\\n          start: stickStart,\\n          endTrigger: lastTop,\\n          end: stickStart,\\n          scrub: true\\n        }\\n      });\\n\\n      \/* Con la testata fissa (solo desktop) la quota di aggancio e' il suo\\n         bordo inferiore e il tratto in cui il testo sfuma e' lo spazio\\n         sotto il paragrafo (--ry-vs-head-gap); senza testata il tratto\\n         e' TEXT_IN_WINDOW. *\/\\n      var withHead = false;\\n      if (head) { if (isDesktop) { withHead = true; } }\\n      function outLenPx() {\\n        if (withHead) { return Math.max(1, parseFloat(getComputedStyle(head).paddingBottom) || 0); }\\n        return Math.max(1, window.innerHeight * TEXT_IN_WINDOW \/ 100);\\n      }\\n\\n      \/* Numeri 2..N (si spengono tornando indietro; il numero acceso piu'\\n         recente copre i precedenti).\\n         - Desktop: lo step corrente e' quello con testo e immagine in\\n           vista, e il testo i entra mentre il testo i-1 sfuma sopra la\\n           quota. Il numero i si accende a meta' di quel crossfade, cioe'\\n           quando lo step i-1 e' salito di mezzo outLen oltre la quota,\\n           in sincrono con testo e immagine.\\n         - Tablet e mobile: il numero i si accende quando il suo step\\n           (immagine) arriva alla quota della linea. *\/\\n      items.forEach(function (item, i) {\\n        if (i === 0) { return; }\\n        var numTrigger = contentTop(item, isDesktop);\\n        var numStart = stickStart;\\n        if (isDesktop) {\\n          numTrigger = contentTop(items[i - 1], true);\\n          numStart = function () { return 'top ' + (stickPx() - outLenPx() \/ 2) + 'px'; };\\n        }\\n        ScrollTrigger.create({\\n          trigger: numTrigger,\\n          scroller: scroller,\\n          start: numStart,\\n          onEnter: function () { nums[i].classList.add('is-on'); },\\n          onLeaveBack: function () { nums[i].classList.remove('is-on'); }\\n        });\\n      });\\n\\n      \/* Transizioni (solo desktop): nel tratto di scambio dello step i la\\n         sua immagine lascia il posto alla successiva con la dissolvenza\\n         liquida (vedi sotto). *\/\\n      \/* Inizio dello scambio: a SWAP_AT% del viewport; con la testata fissa\\n         il punto e' invece la quota di aggancio (il testo sparisce sotto\\n         la testata, l'immagine lo segue subito). *\/\\n      function swapTopPx() {\\n        if (withHead) { return stickPx(); }\\n        return window.innerHeight * SWAP_AT \/ 100;\\n      }\\n      function swapStart() { return 'top ' + swapTopPx() + 'px'; }\\n      \/* Con la testata: scambio breve e fisso (SWAP_LEN), cosi' non si\\n         sovrappone mai allo scambio dello step successivo e resta in\\n         sincrono col testo. Senza: fino all'uscita dello step, come nel\\n         reference. *\/\\n      function swapEnd() {\\n        if (withHead) { return 'top ' + (stickPx() - window.innerHeight * SWAP_LEN \/ 100) + 'px'; }\\n        return 'bottom top';\\n      }\\n      function swapTrigger(item) {\\n        return {\\n          trigger: item,\\n          scroller: scroller,\\n          start: swapStart,\\n          end: swapEnd,\\n          scrub: true\\n        };\\n      }\\n      if (isDesktop) {\\n        \/* Reveal della pila (trigger = section, mai l'elemento agganciato) *\/\\n        if (reduced) {\\n          media.classList.add('is-in');\\n        } else {\\n          ScrollTrigger.create({\\n            trigger: root,\\n            scroller: scroller,\\n            start: REVEAL_AT,\\n            once: true,\\n            onEnter: function () { media.classList.add('is-in'); }\\n          });\\n        }\\n\\n        \/* Dissolvenza liquida: l'immagine in arrivo si dissolve sopra la\\n           corrente con un leggero zoom in uscita, mentre il displacement\\n           sale a LIQUID_PEAK a meta' scambio e torna a 0; la pila zooma\\n           fino a LIQUID_ZOOM e rientra, cosi' i bordi deformati restano\\n           fuori dalla cornice. Il filtro e' attivo solo durante lo scambio\\n           (costa alla GPU). Con motion ridotta: dissolvenza semplice. *\/\\n        function liquidTrigger(item) {\\n          var vars = swapTrigger(item);\\n          if (liquid) {\\n            vars.onToggle = function (self) {\\n              stack.style.filter = self.isActive ? 'url(#' + liquid.id + ')' : '';\\n            };\\n          }\\n          return vars;\\n        }\\n        for (var i = 0; count - 1 > i; i += 1) {\\n          var next = slides[i + 1];\\n          var tl = gsap.timeline({ scrollTrigger: liquidTrigger(items[i]) });\\n          tl.to(next, { opacity: 1, ease: 'power1.inOut', duration: 1 }, 0);\\n          tl.fromTo(next.querySelector('.ry-vslider__zoom'), { scale: 1.06 }, { scale: 1, ease: 'power2.out', duration: 1, immediateRender: false }, 0);\\n          if (liquid) {\\n            tl.to(liquid.disp, { attr: { scale: LIQUID_PEAK }, ease: 'sine.in', duration: 0.5 }, 0);\\n            tl.to(liquid.disp, { attr: { scale: 0 }, ease: 'sine.out', duration: 0.5 }, 0.5);\\n            tl.to(stack, { scale: LIQUID_ZOOM, ease: 'sine.in', duration: 0.5 }, 0);\\n            tl.to(stack, { scale: 1, ease: 'sine.out', duration: 0.5 }, 0.5);\\n          }\\n        }\\n\\n        \/* Testi: uno solo visibile alla volta.\\n           - Il testo corrente sfuma a 0 mentre il suo top sale oltre la\\n             quota di aggancio, nel tratto \\\"outLen\\\" (vedi outLenPx sopra):\\n             con la testata fissa arriva al paragrafo gia' trasparente.\\n           - Il testo successivo appare esattamente mentre il precedente\\n             sparisce (stessa curva, rovesciata) e resta pieno finche' non\\n             tocca a lui salire oltre la quota.\\n           - Tutti gli altri restano a 0. Il primo non sfuma in entrata,\\n             l'ultimo non sfuma in uscita.\\n           Opacita' calcolata dalle posizioni reali a ogni scroll: reversibile\\n           e senza conflitti anche con step vicini. *\/\\n        var bodies = items.map(function (item) { return item.querySelector('.ry-vslider__body'); });\\n        \/* 0..1: quanto il testo k e' salito oltre la quota, sul tratto outLen *\/\\n        function outProgress(k) {\\n          var r = bodies[k].getBoundingClientRect();\\n          var q = stickPx();\\n          if (r.top >= q) { return 0; }\\n          return Math.min(1, (q - r.top) \/ outLenPx());\\n        }\\n        function applyTextOpacity() {\\n          bodies.forEach(function (body, k) {\\n            var o = 1;\\n            if (k > 0) { o = outProgress(k - 1); }\\n            if (count - 1 > k) { o = Math.min(o, 1 - outProgress(k)); }\\n            body.style.opacity = String(Math.max(0, Math.min(1, o)));\\n          });\\n        }\\n        bodies.forEach(function (body) {\\n          ScrollTrigger.create({\\n            trigger: body,\\n            scroller: scroller,\\n            start: 'top bottom',\\n            end: 'bottom top',\\n            onUpdate: applyTextOpacity,\\n            onToggle: applyTextOpacity,\\n            onRefresh: applyTextOpacity\\n          });\\n        });\\n        applyTextOpacity();\\n      } else {\\n        \/* Tablet e mobile: il blocco (immagine + testo) che sale oltre la\\n           quota del numero si attenua gradualmente fino a MOBILE_DIM nel\\n           tratto MOBILE_DIM_RANGE; l'ultimo resta pieno. Calcolato dalla\\n           posizione reale a ogni scroll, reversibile. *\/\\n        function applyItemOpacity() {\\n          var q = stickPx();\\n          var range = Math.max(1, window.innerHeight * MOBILE_DIM_RANGE \/ 100);\\n          items.forEach(function (item, k) {\\n            var o = 1;\\n            if (count - 1 > k) {\\n              var r = item.getBoundingClientRect();\\n              if (q > r.top) {\\n                var p = Math.min(1, (q - r.top) \/ range);\\n                o = 1 - (1 - MOBILE_DIM) * p;\\n              }\\n            }\\n            item.style.opacity = String(o);\\n          });\\n        }\\n        items.forEach(function (item) {\\n          ScrollTrigger.create({\\n            trigger: item,\\n            scroller: scroller,\\n            start: 'top bottom',\\n            end: 'bottom top',\\n            onUpdate: applyItemOpacity,\\n            onToggle: applyItemOpacity,\\n            onRefresh: applyItemOpacity\\n          });\\n        });\\n        applyItemOpacity();\\n      }\\n\\n      \/* Se cambia l'altezza dei testi (font, immagini, resize) si ricalcola tutto *\/\\n      var refreshTO;\\n      function scheduleRefresh() {\\n        clearTimeout(refreshTO);\\n        refreshTO = setTimeout(function () { ScrollTrigger.refresh(); }, 120);\\n      }\\n      var observer = null;\\n      if (typeof ResizeObserver !== 'undefined') {\\n        observer = new ResizeObserver(scheduleRefresh);\\n        observer.observe(root.querySelector('.ry-vslider__items'));\\n      }\\n\\n      return function cleanup() {\\n        ScrollTrigger.removeEventListener('refreshInit', beforeMeasure);\\n        ScrollTrigger.removeEventListener('refresh', afterMeasure);\\n        afterMeasure();\\n        if (observer) { observer.disconnect(); }\\n        clearTimeout(refreshTO);\\n        lastBody.style.minHeight = '';\\n        track.style.height = '';\\n        track.style.bottom = '';\\n        track.style.top = '';\\n        root.style.removeProperty('--ry-vs-top');\\n        itemsEl.style.paddingTop = '';\\n        if (headwrap) { headwrap.style.height = ''; }\\n        items.forEach(function (item) { item.querySelector('.ry-vslider__body').style.opacity = ''; item.style.opacity = ''; });\\n        nums.forEach(function (num, i) { num.classList.toggle('is-on', i === 0); });\\n      };\\n    }\\n  }\\n\\n  function init() {\\n    gsap.registerPlugin(ScrollTrigger);\\n    var scroller = integrateLenis();\\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\\n    var roots = toArray(document.querySelectorAll(ROOT_SEL));\\n    roots.forEach(function (root) { setup(root, scroller, reduced); });\\n    console.log('[ry-vslider] attivo su ' + roots.length + ' sezione\/i');\\n\\n    if (document.fonts) {\\n      if (document.fonts.ready) { document.fonts.ready.then(function () { ScrollTrigger.refresh(); }); }\\n    }\\n    window.addEventListener('load', function () { ScrollTrigger.refresh(); }, { once: true });\\n  }\\n\\n  if (document.readyState === 'loading') {\\n    document.addEventListener('DOMContentLoaded', function () { ensureGsap(init); });\\n  } else {\\n    ensureGsap(init);\\n  }\\n})();\\n<\/script>\\n\"},\"name\":\"con def\"}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-4,1-4,1-4,1-4|1-2,1-2,1-2,1-2\",\"margin_bottom\":\"small\",\"margin_top\":\"large\",\"row_gap\":\"small\",\"status\":\"disabled\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel paragrafo-card\",\"content\":\"Definiamo obiettivi, formato, performance attese e principali vincoli tecnici e industriali del progetto.\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n@media screen and (max-width: 576px) {\\n.el-meta{\\n    font-size: 70px;\\n}\\n}\",\"height_expand\":true,\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"01.\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Brief con cliente\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel paragrafo-card\",\"content\":\"Selezioniamo la botanica e definiamo il protocollo agronomico pi\u00f9 coerente con il profilo richiesto.\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n@media screen and (max-width: 576px) {\\n.el-meta{\\n    font-size: 70px;\\n}\\n}\",\"height_expand\":true,\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"02.\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Sviluppo botanico\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel paragrafo-card\",\"content\":\"Costruiamo il percorso pi\u00f9 coerente con la matrice e con l\u2019output richiesto: fresco, essiccato o estratto.\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n@media screen and (max-width: 576px) {\\n.el-meta{\\n    font-size: 70px;\\n}\\n}\",\"height_expand\":true,\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"03.\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Definizione del processo\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\",\"title_style\":\"h2\"},\"name\":\"slider\"}]}]},{\"type\":\"row\",\"props\":{\"column_gap\":\"small\",\"layout\":\"1-4,1-4,1-4,1-4|1-2,1-2,1-2,1-2\",\"margin_bottom\":\"small\",\"margin_top\":\"small\",\"row_gap\":\"small\",\"status\":\"disabled\",\"width\":\"expand\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel paragrafo-card\",\"content\":\"Analizziamo e caratterizziamo l\u2019output per verificarne i parametri rilevanti rispetto alle\\nspecifiche del progetto.\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n@media screen and (max-width: 576px) {\\n.el-meta{\\n    font-size: 70px;\\n}\\n}\",\"height_expand\":true,\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"04.\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Analisi e caratterizzazione\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel paragrafo-card\",\"content\":\"Confrontiamo i risultati con le specifiche condivise e, quando necessario, perfezioniamo il\\nprocesso fino alla validazione finale.\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n@media screen and (max-width: 576px) {\\n.el-meta{\\n    font-size: 70px;\\n}\\n}\",\"height_expand\":true,\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"05.\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Validazione\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-4\",\"width_small\":\"1-2\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel paragrafo-card\",\"content\":\"Il percorso si conclude con un output controllato, caratterizzato e sviluppato per integrarsi nel processo industriale del cliente.\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n@media screen and (max-width: 576px) {\\n.el-meta{\\n    font-size: 70px;\\n}\\n}\",\"height_expand\":true,\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"06.\",\"meta_align\":\"above-title\",\"meta_color\":\"warning\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"heading-large\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"tile-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Output finale\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_margin\":\"medium\",\"title_style\":\"h2\"},\"name\":\"slider\"}]}]}]},{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n  .ry-vslider {\\n    \/* ---- quote e spazi (valori del reference) ---- *\/\\n    --ry-vs-top: 25vh;            \/* quota di aggancio di immagine, linea e numero *\/\\n    --ry-vs-inset: 15px;          \/* rientro laterale del blocco: come il container UIkit (15px, 30px da 640, 40px da 960) *\/\\n    --ry-vs-gap: 20px;            \/* gutter della griglia a 12 colonne *\/\\n    --ry-vs-space: 80px;         \/* distanza fra gli step (desktop; il reference usa 180px) *\/\\n    --ry-vs-space-m: 60px;        \/* distanza fra gli step (mobile e tablet) *\/\\n    --ry-vs-space-last: 0px;     \/* distanza fra il penultimo step e l'ultimo (desktop) *\/\\n    --ry-vs-radius: 12px;         \/* angoli delle immagini *\/\\n    --ry-vs-ratio: 3 \/ 2;         \/* rapporto delle immagini (1200x800) *\/\\n    --ry-vs-rail-h: calc(100% - 20px);  \/* linea verticale: alta come l'immagine, finisce 20px sopra al suo bordo inferiore *\/\\n    --ry-vs-rail-shift: 0px;      \/* >0 sposta la linea a destra rispetto al centro del numero *\/\\n    --ry-vs-badge: 20px;          \/* diametro del numero *\/\\n    --ry-vs-badge-x: 0px;         \/* numero e linea: distanza dal bordo sinistro della griglia *\/\\n\\n    \/* ---- griglia a 12 colonne (desktop): dove stanno le cose ---- *\/\\n    --ry-vs-cols-text: 2 \/ span 5;    \/* titolo, riga e testo: dalla colonna 2 alla 6 *\/\\n    --ry-vs-cols-media: 8 \/ span 3;   \/* immagine: dalla colonna 7 alla 11 (span 6 per arrivare al bordo destro) *\/\\n\\n    \/* ---- tablet e mobile ---- *\/\\n    --ry-vs-gutter-m: 40px;           \/* spazio a sinistra del contenuto per linea e numero *\/\\n    --ry-vs-rail-m: 40vh;             \/* lunghezza della linea (non c'e' l'immagine a darle l'altezza) *\/\\n    --ry-vs-figure-w: 700px;          \/* immagine di ogni step: larghezza massima ... *\/\\n    --ry-vs-figure-ratio: 700 \/ 350;  \/* ... e proporzioni (500x350) *\/\\n\\n    \/* ---- testata fissa sopra lo slider (solo desktop) ---- *\/\\n    --ry-vs-head-top: 60px;            \/* distanza dal bordo alto del viewport quando e' fissa (es. altezza del menu) *\/\\n    --ry-vs-head-gap: 70px;           \/* spazio fra il paragrafo della testata e la quota di immagine e linea: e' anche il tratto in cui il testo che sale sfuma *\/\\n    --ry-vs-head-bg: transparent;     \/* sfondo della testata fissa; se resta transparent il JS usa il colore del contenitore *\/\\n\\n    \/* ---- colori e font (allineati al sito) ---- *\/\\n    --ry-vs-ink: #192b35;                       \/* linea piena, numero, riga *\/\\n    --ry-vs-ink-soft: rgba(25, 43, 53, 0.2);    \/* linea di sfondo *\/\\n    --ry-vs-badge-text: #fff;\\n    --ry-vs-font-title: 'Aptos-Light', 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n    --ry-vs-font-strong: 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n    --ry-vs-font-text: 'Aptos', ui-sans-serif, system-ui, sans-serif;\\n\\n    position: relative;\\n    padding: 0 var(--ry-vs-inset);\\n    color: var(--ry-vs-ink);\\n  }\\n\\n  \/* ---------- Testata: eyebrow, titolo e, a destra, divisore, etichetta e\\n     paragrafo. Usa le classi del tema. Su desktop resta fissa in alto per\\n     tutta la section (sticky) e lo slider le scorre sotto: la quota di\\n     aggancio di immagine e linea e' il suo bordo inferiore. ---------- *\/\\n  .ry-vslider__headwrap { position: relative; z-index: 3; }\\n  .ry-vslider__head {\\n    position: relative;\\n    padding-bottom: var(--ry-vs-head-gap);\\n  }\\n  .ry-vslider__head-row {\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n  }\\n  .ry-vslider__head-right { grid-column: 7 \/ span 6; }\\n  @media (max-width: 1023.98px) {\\n    .ry-vslider__head-right { grid-column: 1 \/ -1; }\\n  }\\n  @media (min-width: 1024px) {\\n    \/* Il wrapper esce dal flusso (gli step ricevono dal JS un padding-top\\n       pari all'altezza della testata) e diventa il binario dello sticky:\\n       alto fino all'ultimo step, misurato dal JS. *\/\\n    .ry-vslider.is-ready .ry-vslider__headwrap {\\n      position: absolute;\\n      top: 0;\\n      left: var(--ry-vs-inset);\\n      right: var(--ry-vs-inset);\\n      pointer-events: none;\\n    }\\n    .ry-vslider.is-ready .ry-vslider__head {\\n      position: sticky;\\n      top: var(--ry-vs-head-top);\\n      background-color: var(--ry-vs-head-bg);\\n      background-clip: content-box;   \/* lo sfondo si ferma al paragrafo: nello spazio sotto il testo sfuma, non viene tagliato *\/\\n      pointer-events: auto;\\n    }\\n  }\\n\\n  \/* ---------- Step (colonna testo) ---------- *\/\\n  .ry-vslider__items { position: relative; z-index: 1; }\\n\\n  .ry-vslider__item {\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n    margin: 0 0 var(--ry-vs-space-m);\\n    padding: 0;\\n  }\\n  .ry-vslider__item:last-child { margin-bottom: 0; }\\n\\n  .ry-vslider__figure {\\n    grid-column: 1 \/ -1;\\n    margin: 0 0 20px;\\n    overflow: hidden;\\n  }\\n  .ry-vslider__figure img {\\n    display: block;\\n    width: 100%;\\n    height: auto;\\n    aspect-ratio: var(--ry-vs-ratio);\\n    object-fit: cover;\\n  }\\n\\n  .ry-vslider__body { grid-column: 1 \/ -1; position: relative; }\\n\\n\\n  .ry-vslider__num,\\n  .ry-vslider__badge span {\\n   display: inline-flex;\\n    align-items: center;\\n    justify-content: center;\\n    width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n    border-radius: 3px;\\n        background:#DCE8E2;\\n  border:1px solid #3E6F62;\\n          font-weight: 600;\\n    color: #3E6F62;\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 14px;\\n    line-height: 14px;\\n      width: 22px;\\n    height: 22px;\\n    letter-spacing: 0;\\n    \/*width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n    background: var(--ry-vs-ink);\\n    color: var(--ry-vs-badge-text);\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 12px;\\n    line-height: 12px;\\n    letter-spacing: 0;\\n         \/* width: 28px;\\n    height: 28px;\\n    border: 2px solid #F1F4F0;\\n    border-radius: 5px;\\n    background-color: #3e6f62;\\n    color: #F1F4F0;\\n    font-size: calc(8.57px + 0.446429vw);\\n    font-weight: 600;\\n    line-height: 1;\\n    opacity: 0.2;\\n    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;*\/\\n}\\n\\n  .ry-vslider__num { margin: 0 0 20px; }\\n\\n  .ry-vslider__title {\\n    margin: 0px;\\n    font-family: var(--ry-vs-font-title);\\n    font-weight: 300!important;\\n      font-family: \\\"Aptos-Light\\\";\\n    font-size: 32px;\\n    line-height: 36px;\\n    letter-spacing: -0.03em;\\n    color: inherit;\\n  }\\n  .ry-vslider__title strong {\\n    font-family: var(--ry-vs-font-strong);\\n    font-weight: 300;\\n  }\\n\\n  .ry-vslider__line {\\n    width: 0;\\n    height: 1px;\\n    margin: 0 0 2px;\\n    background: var(--ry-vs-ink);\\n    transition: width 1.8s;\\n  }\\n  .ry-vslider__line{\\n    max-width:700px;\\n  }\\n    .ry-vslider__title, .ry-vslider__text{\\nmax-width:540px;\\n}\\n  .ry-vslider__line.is-in { width: 100%; }\\n\\n  .ry-vslider__text {\\n    font-family: var(--ry-vs-font-text);\\n    font-size: 20px;\\n    letter-spacing: -0.03em;\\n      line-height:30px;\\n  }\\n  .ry-vslider__text p { margin: 0; }\\n  .ry-vslider__text p + p { margin-top: 1em; }\\n\\n  \/* Reveal di titolo e testo: entrano dal basso con fade (1.2s come il reference) *\/\\n  .ry-vslider__reveal {\\n    opacity: 0;\\n    transform: translateY(30px);\\n    transition: transform 1.2s, opacity 0.6s;\\n  }\\n  .ry-vslider__reveal.is-in { opacity: 1; transform: translate(0, 0); }\\n\\n  \/* ---------- Palco agganciato (solo desktop, riempito e pinnato dal JS) ---------- *\/\\n  .ry-vslider__track {\\n    display: none;\\n    position: absolute;\\n    top: 0;\\n    bottom: 0;\\n    left: var(--ry-vs-inset);\\n    right: var(--ry-vs-inset);\\n    z-index: 2;\\n    pointer-events: none;\\n  }\\n  .ry-vslider.is-ready .ry-vslider__track { display: block; }\\n  .ry-vslider.is-ready .ry-vslider__num { display: none; }   \/* il numero sta sulla linea *\/\\n  .ry-vslider__stage {\\n    position: relative;\\n    display: grid;\\n    grid-template-columns: repeat(12, minmax(0, 1fr));\\n    column-gap: var(--ry-vs-gap);\\n    will-change: transform;\\n  }\\n  \/* Aggancio con position: sticky: lo tiene fermo il browser (compositor),\\n     quindi niente tremolio su touch, dove lo scroll non passa da JS.\\n     La classe la mette il JS; il binario (.ry-vslider__track) riceve dal JS\\n     l'altezza esatta, cosi' lo sgancio avviene quando l'ultimo step arriva\\n     alla quota. Senza is-sticky resta il pin a transform di ScrollTrigger. *\/\\n  .ry-vslider.is-sticky .ry-vslider__stage {\\n    position: sticky;\\n    top: var(--ry-vs-top);\\n  }\\n  .ry-vslider__gutter { grid-column: 1 \/ span 1; position: relative; }\\n\\n  \/* Linea verticale: centrata sul numero, sul bordo sinistro della colonna 1 *\/\\n  .ry-vslider__rail {\\n    position: absolute;\\n    top: 0;\\n    left: calc(var(--ry-vs-badge-x) + var(--ry-vs-badge) \/ 2 - 0.5px + var(--ry-vs-rail-shift));\\n    width: 1px;\\n    height: var(--ry-vs-rail-h);\\n    background: var(--ry-vs-ink-soft);\\n  }\\n  .ry-vslider__rail-fill {\\n    position: absolute;\\n    top: 0;\\n    left: -0.5px;\\n    width: 2px;\\n    height: 0;\\n    background: var(--ry-vs-ink);\\n  }\\n\\n  \/* Numero: i 6 span sono sovrapposti, si accende quello dello step corrente *\/\\n  .ry-vslider__badge {\\n    position: absolute;\\n    top: 0;\\n    left: var(--ry-vs-badge-x);\\n    width: var(--ry-vs-badge);\\n    height: var(--ry-vs-badge);\\n  }\\n  .ry-vslider__badge span {\\n    position: absolute;\\n    inset: 0;\\n    opacity: 0;\\n  }\\n  .ry-vslider__badge span.is-on { opacity: 1; }\\n\\n  \/* Pila immagini: entra con scale 0.5 -> 1 (stessa curva del reference) *\/\\n  .ry-vslider__media {\\n    grid-column: var(--ry-vs-cols-media);\\n    position: relative;\\n    aspect-ratio: var(--ry-vs-ratio);\\n    overflow: hidden;\\n    transform: scale(0.5);\\n    transition: transform 1.5s cubic-bezier(0.17, 0.84, 0.53, 0.86);\\n  }\\n  .ry-vslider__media.is-in { transform: scale(1); }\\n\\n  \/* Pila: contiene tutte le slide. Durante lo scambio riceve dal JS il\\n     filtro SVG di displacement (dissolvenza liquida) e un leggero zoom,\\n     che tiene i bordi deformati fuori dal ritaglio della cornice. *\/\\n  .ry-vslider__stack {\\n    position: absolute;\\n    inset: 0;\\n    transform-origin: center center;\\n    will-change: transform;\\n  }\\n  .ry-vslider__slide,\\n  .ry-vslider__zoom,\\n  .ry-vslider__blur {\\n    position: absolute;\\n    inset: 0;\\n  }\\n  .ry-vslider__slide { overflow: hidden; }\\n  \/* Le immagini dopo la prima partono trasparenti: ognuna si dissolve\\n     sopra la precedente (via GSAP, legata allo scroll). *\/\\n  .ry-vslider__slide:not(:first-child) { opacity: 0; }\\n  .ry-vslider__zoom { transform-origin: center center; }\\n\\n  .ry-vslider__slide img {\\n    position: absolute;\\n    inset: 0;\\n    width: 100%;\\n    height: 100%;\\n    object-fit: cover;\\n    opacity: 0;\\n    filter: blur(8px);\\n    transition: opacity 0.4s cubic-bezier(0.17, 0.84, 0.53, 0.86), filter 1.5s;\\n  }\\n  .ry-vslider__media.is-in .ry-vslider__slide img { opacity: 1; filter: blur(0px); }\\n\\n  \/* ---------- Marker: box dentro lo stage pinnato, allineato alla media\\n     dal JS. Seguono la pila come le immagini (fermi durante il pin, poi\\n     via con lei). Appesi allo stage, che non ha overflow hidden, cosi'\\n     le --y negative non vengono tagliate. ---------- *\/\\n  .ry-vslider__markers {\\n    display: none;\\n    position: absolute;\\n    z-index: 3;\\n    pointer-events: none;\\n  }\\n  .ry-vslider.is-ready .ry-vslider__markers { display: block; }\\n  @media (max-width: 1023.98px) {\\n    .ry-vslider__markers { display: none !important; }\\n  }\\n\\n  @media (min-width: 640px) {\\n    .ry-vslider { --ry-vs-inset: 30px; }\\n  }\\n  @media (min-width: 960px) {\\n    .ry-vslider { --ry-vs-inset: 40px; }\\n  }\\n\\n  \/* ---------- Tablet e mobile: linea e numeri a sinistra (agganciati\\n     allo scroll come su desktop), immagine 500x350 sopra al titolo,\\n     poi titolo e testo. La pila immagini non c'e'. ---------- *\/\\n  @media (max-width: 1023.98px) {\\n    \/* Solo gli step lasciano spazio a linea e numero: la testata resta a\\n       tutta larghezza, allineata al resto della pagina. *\/\\n    .ry-vslider.is-ready .ry-vslider__items { padding-left: var(--ry-vs-gutter-m); }\\n    .ry-vslider.is-ready .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\\n    .ry-vslider.is-ready .ry-vslider__item--last { margin-bottom: 0px; padding-top: 80px;}\\n\\n    .ry-vslider__figure { width: 100%; max-width: var(--ry-vs-figure-w); }\\n    .ry-vslider__figure img { aspect-ratio: var(--ry-vs-figure-ratio); }\\n\\n    .ry-vslider__stage { display: block; }\\n    .ry-vslider__gutter { height: var(--ry-vs-rail-m); }\\n    .ry-vslider__media { display: none; }\\n\\n    .ry-vslider__title {\\n      margin-bottom: 10px;\\n    }\\n\\n  .ry-vslider__line {\\n  margin-bottom: 20px;\\n  }\\n  }\\n\\n  \/* ---------- Desktop ---------- *\/\\n  @media (min-width: 1024px) {\\n    .ry-vslider__item { margin-bottom: var(--ry-vs-space); }\\n    .ry-vslider__item--penult { margin-bottom: var(--ry-vs-space-last); }\\n    .ry-vslider__item--last { margin-bottom: 0; padding-top: 60px; }\\n\\n    .ry-vslider__body { grid-column: var(--ry-vs-cols-text); grid-row: 1; }\\n    \/* Senza JS l'immagine di ogni step resta visibile a destra (fallback statico) *\/\\n    .ry-vslider__figure { grid-column: var(--ry-vs-cols-media); grid-row: 1; margin: 0; }\\n    .ry-vslider.is-ready .ry-vslider__figure { display: none; }\\n\\n    .ry-vslider__title {\\n      margin-bottom: 10px;\\n      \/*font-size: clamp(38px, 3.2vw, 62px);*\/\\n      \/*line-height: clamp(42px, 3.475vw, 68px);*\/\\n    }\\n    .ry-vslider__line { margin-bottom: 40px; }\\n  }\\n\\n  \/* ---------- Motion ridotta: solo fade brevi, niente slide\/blur\/scale ---------- *\/\\n  @media (prefers-reduced-motion: reduce) {\\n    .ry-vslider__reveal { transform: none; transition: opacity 0.3s; }\\n    .ry-vslider__line { transition: none; }\\n    .ry-vslider__media { transform: none; transition: none; }\\n    .ry-vslider__slide img { filter: none; transition: opacity 0.3s; }\\n  }\\n\\n  \/* ---------- Marker (stile): incollato dal CSS globale del sito, qui\\n     replicato per completezza del blocco. ---------- *\/\\n  .rt-marker {\\n    position: absolute;\\n    left: var(--x);\\n    top: var(--y);\\n    width: 32px;\\n    height: 32px;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    border-radius: 4px;\\n    border: 1px solid rgba(255, 255, 255, .35);\\n    background-color: rgba(241, 244, 240, 0.5);\\n    -webkit-backdrop-filter: blur(4px);\\n    backdrop-filter: blur(4px);\\n    color: #192B35;\\n    pointer-events: none;\\n  }\\n  .rt-marker::before {\\n    content: \\\"\\\";\\n    width: 8px;\\n    height: 8px;\\n    border-radius: 100%;\\n    background-color: currentColor;\\n  }\\n  .padding-testo{\\n    padding-top: 10px;\\n  }\\n<\/style>\n<p>\\n\\n<\/p>\n<section class=\\\"ry-vslider\\\" id=\\\"ry-vslider\\\">\\n\\n  <!-- Testata fissa (desktop): stessi elementi e classi del builder.\\n       Il wrapper e' il binario della testata: il JS lo fa finire dove\\n       arriva l'ultimo step, cosi' testata, immagine e ultimo testo si\\n       sganciano insieme e restano visibili fino alla fine. -->\\n  <\/p>\n<div class=\\\"ry-vslider__headwrap\\\">\\n  <\/p>\n<div class=\\\"ry-vslider__head\\\">\\n    <\/p>\n<div class=\\\"uk-h5 uk-text-primary uk-margin-small-bottom uk-width-small\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\">[ 06. ]<\/div>\n<p>\\n    <\/p>\n<h3 class=\\\"uk-heading-large ry-blur uk-margin-remove-top\\\">Dal brief all\u2019output,<br class=\\\"uk-visible@m\\\">ogni fase ha un metodo.<\/h3>\n<p>\\n    <\/p>\n<div class=\\\"ry-vslider__head-row\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__head-right\\\">\\n        <\/p>\n<div>\n<div class=\\\"divider is-visible\\\"><\/div>\n<\/div>\n<p>\\n        <\/p>\n<div class=\\\"uk-h6 uk-margin\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\"><span class=\\\"label-dot\\\">Metodo scientifico e partnership<\/span><\/div>\n<p>\\n        <\/p>\n<div class=\\\"uk-panel paragrafo padding-testo testi-effect uk-margin-default-top uk-text-left\\\" uk-parallax=\\\"opacity: 0,1 20%; blur: 10,0 20%; easing: 0\\\">Reytera trasforma un\u2019esigenza industriale in un percorso condiviso di sviluppo. Competenze botaniche, estrattive e analitiche accompagnano il progetto fino a un output verificato rispetto alle specifiche condivise.<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n\\n  <!-- Palco sticky: lo riempie il JS (linea, numeri, pila immagini) -->\\n  <\/p>\n<div class=\\\"ry-vslider__track\\\" aria-hidden=\\\"true\\\">\\n    <\/p>\n<div class=\\\"ry-vslider__stage\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__gutter\\\">\\n        <\/p>\n<div class=\\\"ry-vslider__rail\\\">\n<div class=\\\"ry-vslider__rail-fill\\\"><\/div>\n<\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__badge\\\"><\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__media\\\"><\/div>\n<p>\\n    <\/p><\/div>\n<p>\\n  <\/p><\/div>\n<p>\\n\\n  <\/p>\n<div class=\\\"ry-vslider__items\\\">\\n\\n    <!-- SEGNAPOSTO: testi e immagini dei 6 step sono di esempio -->\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/brief-2-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">1<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal uk-h2\\\">Brief con cliente<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Definiamo obiettivi, formato, performance attese e principali vincoli tecnici e industriali del progetto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/Botanist_2.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">2<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Sviluppo botanico<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Selezioniamo la botanica e definiamo il protocollo agronomico pi\u00f9 coerente con il profilo richiesto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/Definizione-del-processo-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">3<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Definizione del processo<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Costruiamo il percorso pi\u00f9 coerente con la matrice e con l\u2019output richiesto: fresco, essiccato o estratto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/defenizione-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">4<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Analisi e caratterizzazione<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Analizziamo e caratterizziamo l\u2019output per verificarne i parametri rilevanti rispetto alle specifiche del progetto.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire -->\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/validazzione-img-1.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">5<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Validazione<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Confrontiamo i risultati con le specifiche condivise e, quando necessario, perfezioniamo il processo fino alla validazione finale.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n    <\/p>\n<article class=\\\"ry-vslider__item\\\">\\n      <\/p>\n<div class=\\\"ry-vslider__figure\\\">\\n        <!-- SEGNAPOSTO: immagine ripetuta, sostituire -->\\n        <img src=\\\"\/wp-content\/uploads\/2026\/09\/output-finale-img.jpeg\\\" width=\\\"1200\\\" height=\\\"800\\\" loading=\\\"lazy\\\" alt=\\\"\\\">\\n      <\/div>\n<p>\\n      <\/p>\n<div class=\\\"ry-vslider__body\\\">\\n        <span class=\\\"ry-vslider__num\\\">6<\/span>\\n        <\/p>\n<h3 class=\\\"ry-vslider__title ry-vslider__reveal\\\">Output finale<\/h3>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__line\\\"><\/div>\n<p>\\n        <\/p>\n<div class=\\\"ry-vslider__text ry-vslider__reveal\\\">\n<p>Il percorso si conclude con un output controllato, caratterizzato e sviluppato per integrarsi nel processo industriale del cliente.<\/p>\n<\/div>\n<p>\\n      <\/p><\/div>\n<p>\\n    <\/article>\n<p>\\n\\n  <\/p><\/div>\n<p>\\n<\/section>\n<p>\\n\\n<script>\\n(function () {\\n  'use strict';\\n\\n  \/* Nota di stile: niente doppia e-commerciale, niente segno \\\"minore di\\\"\\n     e niente backslash nel JS, cosi' il blocco HTML del builder arriva\\n     in pagina integro (i cicli usano \\\"n > i\\\", le condizioni if annidati). *\/\\n\\n  var ROOT_SEL = '.ry-vslider';\\n  var DESKTOP_MQ = '(min-width: 1024px)';   \/* stessa soglia del CSS *\/\\n  var MOBILE_MQ = '(max-width: 1023.98px)';\\n  var SWAP_AT = 10;        \/* % viewport: lo step inizia a cedere l'immagine quando il suo top e' a 10vh *\/\\n  var TEXT_IN_WINDOW = 12; \/* % viewport: senza testata fissa, tratto oltre la quota in cui il testo corrente sparisce e appare il successivo (con la testata vale --ry-vs-head-gap) *\/\\n  var SWAP_LEN = 15;       \/* % viewport: con la testata fissa, lunghezza dello scambio immagine (parte quando il testo comincia a sfumare) *\/\\n  \/* Dissolvenza liquida (solo desktop): filtro SVG feTurbulence + feDisplacementMap *\/\\n  var LIQUID_PEAK = 60;              \/* intensita' massima dello spostamento (attributo scale del displacement), a meta' scambio *\/\\n  var LIQUID_ZOOM = 1.1;             \/* zoom della pila a meta' scambio: tiene i bordi deformati fuori dalla cornice *\/\\n  var LIQUID_FREQ = '0.012 0.018';   \/* frequenza della turbolenza (piu' bassa = onde piu' larghe) *\/\\n  var LIQUID_OCTAVES = 2;\\n  var MOBILE_DIM = 0.5;    \/* tablet e mobile: opacita' a cui si attenua il blocco (immagine + testo) che sale oltre il numero *\/\\n  var MOBILE_DIM_RANGE = 20; \/* % viewport: tratto oltre la quota in cui avviene l'attenuazione *\/\\n  var REVEAL_AT = 'top 90%';\\n\\n  \/* Marker: coordinate x\/y (le classi uk-visible@s \/ uk-hidden@s\\n     restano nel markup per lo switch di breakpoint UIkit). *\/\\n  var MARKERS_HTML =\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:43%; --y:0px; \\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:-5px; --y:120px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:69%; --y:220px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:65%; --y:-280px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>' +\\n    '<span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>';\\n\\n  if (window.ryVsliderAttivo) { return; }\\n  window.ryVsliderAttivo = true;\\n\\n  \/* GSAP e ScrollTrigger dovrebbero esserci gia' (tema\/plugin). Se dopo\\n     il load mancano ancora, si caricano da CDN come rete di sicurezza. *\/\\n  var gsapLoading = false;\\n  function hasGsap() {\\n    if (typeof gsap === 'undefined') { return false; }\\n    if (typeof ScrollTrigger === 'undefined') { return false; }\\n    return true;\\n  }\\n  function ensureGsap(done) {\\n    if (hasGsap()) { return done(); }\\n    if (document.readyState !== 'complete') {\\n      window.addEventListener('load', function () { ensureGsap(done); }, { once: true });\\n      return;\\n    }\\n    if (gsapLoading) { return; }\\n    gsapLoading = true;\\n    var base = 'https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/';\\n    function load(src, next) {\\n      var s = document.createElement('script');\\n      s.src = base + src;\\n      s.onload = next;\\n      document.head.appendChild(s);\\n    }\\n    load('gsap.min.js', function () { load('ScrollTrigger.min.js', done); });\\n  }\\n\\n  \/* Lenis: sul sito e' creato in uno script inline con \\\"const lenis = new\\n     Lenis(...)\\\": non sta su window, ma una const globale e' visibile\\n     anche da qui. Agganciando ScrollTrigger.update al suo evento\\n     \\\"scroll\\\", il pin viene aggiornato nello stesso frame in cui Lenis\\n     muove la pagina: senza questo aggancio ScrollTrigger reagirebbe\\n     all'evento scroll nativo un frame dopo, e la linea da 1px tremerebbe. *\/\\n  function findLenis() {\\n    if (window.lenis) { return window.lenis; }\\n    try {\\n      if (typeof lenis !== 'undefined') { return lenis; }\\n    } catch (e) { \/* const ancora non inizializzata: nessun Lenis *\/ }\\n    return null;\\n  }\\n  function integrateLenis() {\\n    var instance = findLenis();\\n    if (!instance) { return window; }\\n    if (typeof instance.on !== 'function') { return window; }\\n\\n    var wrapper = window;\\n    if (instance.options) { if (instance.options.wrapper) { wrapper = instance.options.wrapper; } }\\n    var isWindowScroll = false;\\n    if (wrapper === window) { isWindowScroll = true; }\\n    if (wrapper === document.documentElement) { isWindowScroll = true; }\\n    if (wrapper === document.body) { isWindowScroll = true; }\\n\\n    if (isWindowScroll) {\\n      instance.on('scroll', ScrollTrigger.update);\\n      console.log('[ry-vslider] Lenis sincronizzato con ScrollTrigger');\\n      return window;\\n    }\\n\\n    ScrollTrigger.scrollerProxy(wrapper, {\\n      scrollTop: function (value) {\\n        if (arguments.length) { instance.scrollTo(value, { immediate: true }); }\\n        return instance.scroll || 0;\\n      },\\n      getBoundingClientRect: function () {\\n        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };\\n      },\\n      pinType: wrapper.style.transform ? 'transform' : 'fixed'\\n    });\\n    instance.on('scroll', ScrollTrigger.update);\\n    ScrollTrigger.defaults({ scroller: wrapper });\\n    return wrapper;\\n  }\\n\\n  function toArray(list) { return Array.prototype.slice.call(list); }\\n\\n  function make(tag, className) {\\n    var node = document.createElement(tag);\\n    if (className) { node.className = className; }\\n    return node;\\n  }\\n\\n  \/* Filtro SVG per la dissolvenza liquida: turbolenza (rumore statico) +\\n     displacement map con scale 0; il JS anima scale durante lo scambio.\\n     Creato via DOM (niente markup), un filtro per sezione. *\/\\n  var SVG_NS = 'http:\/\/www.w3.org\/2000\/svg';\\n  var liquidCount = 0;\\n  function buildLiquidFilter(root) {\\n    liquidCount += 1;\\n    var id = 'ry-liquid-' + liquidCount;\\n    var svg = document.createElementNS(SVG_NS, 'svg');\\n    svg.setAttribute('width', '0');\\n    svg.setAttribute('height', '0');\\n    svg.setAttribute('aria-hidden', 'true');\\n    svg.style.position = 'absolute';\\n    var filter = document.createElementNS(SVG_NS, 'filter');\\n    filter.setAttribute('id', id);\\n    filter.setAttribute('x', '-20%');\\n    filter.setAttribute('y', '-20%');\\n    filter.setAttribute('width', '140%');\\n    filter.setAttribute('height', '140%');\\n    filter.setAttribute('color-interpolation-filters', 'sRGB');\\n    var turb = document.createElementNS(SVG_NS, 'feTurbulence');\\n    turb.setAttribute('type', 'fractalNoise');\\n    turb.setAttribute('baseFrequency', LIQUID_FREQ);\\n    turb.setAttribute('numOctaves', String(LIQUID_OCTAVES));\\n    turb.setAttribute('seed', '7');\\n    turb.setAttribute('result', 'noise');\\n    var disp = document.createElementNS(SVG_NS, 'feDisplacementMap');\\n    disp.setAttribute('in', 'SourceGraphic');\\n    disp.setAttribute('in2', 'noise');\\n    disp.setAttribute('scale', '0');\\n    disp.setAttribute('xChannelSelector', 'R');\\n    disp.setAttribute('yChannelSelector', 'G');\\n    filter.appendChild(turb);\\n    filter.appendChild(disp);\\n    svg.appendChild(filter);\\n    root.appendChild(svg);\\n    return { id: id, disp: disp };\\n  }\\n\\n  \/* Costruisce il palco: una slide per step (clone dell'immagine dello\\n     step) dentro la pila, un numero per step, e le classi penultimo\/ultimo. *\/\\n  function build(root, items) {\\n    var media = root.querySelector('.ry-vslider__media');\\n    var badge = root.querySelector('.ry-vslider__badge');\\n    var count = items.length;\\n    var slides = [];\\n    var nums = [];\\n    var stack = make('div', 'ry-vslider__stack');\\n    media.appendChild(stack);\\n\\n    items.forEach(function (item, i) {\\n      var source = item.querySelector('.ry-vslider__figure img');\\n      var slide = make('div', 'ry-vslider__slide');\\n      var zoom = make('div', 'ry-vslider__zoom');\\n      var blur = make('div', 'ry-vslider__blur');\\n      var img = source ? source.cloneNode(true) : make('img');\\n      slide.style.zIndex = String(i + 1);   \/* ogni immagine si dissolve sopra la precedente *\/\\n      if (i === 0) { img.setAttribute('loading', 'eager'); }\\n      img.setAttribute('alt', '');\\n      blur.appendChild(img);\\n      zoom.appendChild(blur);\\n      slide.appendChild(zoom);\\n      stack.appendChild(slide);\\n      slides.push(slide);\\n\\n      var num = make('span', i === 0 ? 'is-on' : '');\\n      num.textContent = String(i + 1);\\n      badge.appendChild(num);\\n      nums.push(num);\\n    });\\n\\n    if (count > 1) { items[count - 2].classList.add('ry-vslider__item--penult'); }\\n    items[count - 1].classList.add('ry-vslider__item--last');\\n\\n    return { slides: slides, nums: nums, stack: stack };\\n  }\\n\\n  function setup(root, scroller, reduced) {\\n    var items = toArray(root.querySelectorAll('.ry-vslider__item'));\\n    var count = items.length;\\n    if (count === 0) { return; }\\n\\n    var built = build(root, items);\\n    var slides = built.slides;\\n    var nums = built.nums;\\n    var stack = built.stack;\\n    var liquid = null;\\n    if (!reduced) { liquid = buildLiquidFilter(root); }\\n    var track = root.querySelector('.ry-vslider__track');\\n    var stage = root.querySelector('.ry-vslider__stage');\\n    var media = root.querySelector('.ry-vslider__media');\\n    var fill = root.querySelector('.ry-vslider__rail-fill');\\n    var lastBody = items[count - 1].querySelector('.ry-vslider__body');\\n    var itemsEl = root.querySelector('.ry-vslider__items');\\n    var head = root.querySelector('.ry-vslider__head');\\n    var headwrap = root.querySelector('.ry-vslider__headwrap');\\n    root.classList.add('is-ready');\\n\\n    \/* Testata fissa: se non ha un colore di sfondo suo, prende quello del\\n       primo contenitore che ne ha uno, cosi' i testi che le scorrono sotto\\n       spariscono davvero. *\/\\n    if (head) {\\n      var headBg = getComputedStyle(head).backgroundColor;\\n      var isClear = false;\\n      if (headBg === 'transparent') { isClear = true; }\\n      if (headBg === 'rgba(0, 0, 0, 0)') { isClear = true; }\\n      if (isClear) {\\n        var bgEl = root;\\n        while (bgEl) {\\n          if (bgEl === document.documentElement) { break; }\\n          var c = getComputedStyle(bgEl).backgroundColor;\\n          if (c !== 'transparent') { if (c !== 'rgba(0, 0, 0, 0)') { head.style.backgroundColor = c; break; } }\\n          bgEl = bgEl.parentElement;\\n        }\\n      }\\n    }\\n\\n    \/* Modalita' di aggancio. Default: position sticky (nessun tremolio su\\n       touch: lo scroll del compositor e lo sticky sono nello stesso frame,\\n       il pin a transform arriva un frame dopo). Lo sticky si annulla\\n       dentro un antenato con overflow hidden: quegli antenati passano a\\n       overflow clip, che ritaglia uguale ma non blocca lo sticky.\\n       data-ry-pin=\\\"transform\\\" sulla section forza il vecchio pin. *\/\\n    var useSticky = root.getAttribute('data-ry-pin') !== 'transform';\\n    if (useSticky) {\\n      if (!window.CSS) { useSticky = false; }\\n      else if (!CSS.supports('overflow', 'clip')) { useSticky = false; }\\n    }\\n    if (useSticky) {\\n      var anc = root.parentElement;\\n      while (anc) {\\n        if (anc === document.body) { break; }\\n        var ov = getComputedStyle(anc);\\n        if (ov.overflowX === 'hidden') { anc.style.overflowX = 'clip'; }\\n        if (ov.overflowY === 'hidden') { anc.style.overflowY = 'clip'; }\\n        anc = anc.parentElement;\\n      }\\n      root.classList.add('is-sticky');\\n    }\\n\\n    \/* Marker dentro il palco pinnato (.ry-vslider__stage): seguono la pila\\n       come le immagini (fermi durante il pin, poi via con lei). Allineati\\n       alla colonna media, ma appesi allo stage (che non ha overflow hidden)\\n       cosi' le --y negative non vengono tagliate. *\/\\n    var markers = make('div', 'ry-vslider__markers');\\n    markers.innerHTML = MARKERS_HTML;\\n    stage.appendChild(markers);\\n\\n    function placeMarkers() {\\n      var mediaRect = media.getBoundingClientRect();\\n      var stageRect = stage.getBoundingClientRect();\\n      markers.style.left = (mediaRect.left - stageRect.left) + 'px';\\n      markers.style.top = (mediaRect.top - stageRect.top) + 'px';\\n      markers.style.width = mediaRect.width + 'px';\\n      markers.style.height = mediaRect.height + 'px';\\n    }\\n    placeMarkers();\\n    ScrollTrigger.addEventListener('refresh', placeMarkers);\\n    window.addEventListener('resize', placeMarkers);\\n\\n    \/* ---- Reveal (tutti i breakpoint): titolo, testo, riga ---- *\/\\n    var revealEls = toArray(root.querySelectorAll('.ry-vslider__reveal, .ry-vslider__line'));\\n    revealEls.forEach(function (el) {\\n      if (reduced) { el.classList.add('is-in'); return; }\\n      ScrollTrigger.create({\\n        trigger: el,\\n        scroller: scroller,\\n        start: REVEAL_AT,\\n        once: true,\\n        onEnter: function () { el.classList.add('is-in'); }\\n      });\\n    });\\n\\n    \/* ---- Aggancio, linea e numeri su tutti i breakpoint; su desktop\\n       anche la pila immagini con le transizioni ---- *\/\\n    var mm = gsap.matchMedia();\\n    mm.add(DESKTOP_MQ, function () { return setupPinned(true); });\\n    mm.add(MOBILE_MQ, function () { return setupPinned(false); });\\n\\n    \/* Primo elemento visibile di uno step: su tablet\/mobile l'immagine\\n       (sta sopra al titolo), su desktop il blocco testo (l'immagine del\\n       singolo step e' nascosta, c'e' la pila). E' il riferimento per\\n       accendere il numero e per la fine dell'aggancio. *\/\\n    function contentTop(item, isDesktop) {\\n      var body = item.querySelector('.ry-vslider__body');\\n      if (isDesktop) { return body; }\\n      return item.querySelector('.ry-vslider__figure') || body;\\n    }\\n\\n    function setupPinned(isDesktop) {\\n      var lastTop = contentTop(items[count - 1], isDesktop);\\n\\n      \/* Quota di aggancio in px, dalla variabile --ry-vs-top (vh, % o px) *\/\\n      function stickPx() {\\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-top').trim();\\n        var n = parseFloat(raw);\\n        if (isNaN(n)) { return window.innerHeight * 0.2; }\\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\\n        if (raw.indexOf('%') > -1) { return window.innerHeight * n \/ 100; }\\n        return n;\\n      }\\n      function stickStart() { return 'top ' + stickPx() + 'px'; }\\n      \/* Quota della testata fissa in px (variabile --ry-vs-head-top) *\/\\n      function headTopPx() {\\n        var raw = getComputedStyle(root).getPropertyValue('--ry-vs-head-top').trim();\\n        var n = parseFloat(raw);\\n        if (isNaN(n)) { return 0; }\\n        if (raw.indexOf('vh') > -1) { return window.innerHeight * n \/ 100; }\\n        return n;\\n      }\\n\\n      \/* Prima di ogni misura di ScrollTrigger:\\n         1) gli antenati con transform (es. il pannello con uk-parallax\\n            \\\"scale: 0.9,1\\\") vengono azzerati, altrimenti start, end e\\n            dimensioni del pin escono scalati o spostati. Vengono\\n            ripristinati appena la misura e' finita;\\n         2) l'ultimo step e' alto almeno quanto il palco (immagine su\\n            desktop, linea su mobile), cosi' il palco una volta sganciato\\n            non sporge sotto la section. *\/\\n      var transformed = [];\\n      function beforeMeasure() {\\n        transformed = [];\\n        var el = root.parentElement;\\n        while (el) {\\n          if (el === document.body) { break; }\\n          if (getComputedStyle(el).transform !== 'none') {\\n            transformed.push({ el: el, inline: el.style.transform });\\n            el.style.transform = 'none';\\n          }\\n          el = el.parentElement;\\n        }\\n        var offset = lastBody.getBoundingClientRect().top - lastTop.getBoundingClientRect().top;\\n        lastBody.style.minHeight = Math.max(0, Math.round(stage.offsetHeight - offset)) + 'px';\\n        \/* Con la testata fissa (desktop): la quota di aggancio e' il suo\\n           bordo inferiore; gli step partono sotto di lei (padding-top);\\n           il suo binario finisce dove arriva l'ultimo step, cosi' si\\n           sgancia nello stesso istante del palco e da li' testata,\\n           immagine e ultimo testo scorrono insieme. Il binario del palco\\n           parte dal primo step, non dalla cima della section. *\/\\n        var rootTop = root.getBoundingClientRect().top;\\n        if (isDesktop) {\\n          if (head) {\\n            var headH = head.offsetHeight;\\n            root.style.setProperty('--ry-vs-top', Math.round(headH + headTopPx()) + 'px');\\n            itemsEl.style.paddingTop = headH + 'px';\\n            if (headwrap) { headwrap.style.height = Math.round(lastTop.getBoundingClientRect().top - rootTop) + 'px'; }\\n          }\\n        } else {\\n          root.style.removeProperty('--ry-vs-top');\\n          itemsEl.style.paddingTop = '';\\n          if (headwrap) { headwrap.style.height = ''; }\\n        }\\n        var itemsTop = items[0].getBoundingClientRect().top;\\n        track.style.top = Math.round(itemsTop - rootTop) + 'px';\\n        \/* Sticky: il binario finisce dove il contenuto dell'ultimo step\\n           arriva alla quota, piu' l'altezza del palco (sgancio esatto). *\/\\n        if (useSticky) {\\n          var trackEnd = lastTop.getBoundingClientRect().top - itemsTop + stage.offsetHeight;\\n          track.style.bottom = 'auto';\\n          track.style.height = Math.round(trackEnd) + 'px';\\n        }\\n      }\\n      function afterMeasure() {\\n        transformed.forEach(function (t) { t.el.style.transform = t.inline; });\\n        transformed = [];\\n      }\\n      ScrollTrigger.addEventListener('refreshInit', beforeMeasure);\\n      ScrollTrigger.addEventListener('refresh', afterMeasure);\\n\\n      \/* Aggancio del palco senza sticky (solo se forzato o se il browser\\n         non supporta overflow clip): pin di ScrollTrigger dalla quota\\n         --ry-vs-top fino a quando il contenuto dell'ultimo step arriva\\n         alla stessa quota. pinSpacing false: il palco vive in un overlay\\n         assoluto, non deve aggiungere spazio. *\/\\n      if (!useSticky) {\\n        ScrollTrigger.create({\\n          trigger: itemsEl,\\n          scroller: scroller,\\n          start: stickStart,\\n          endTrigger: lastTop,\\n          end: stickStart,\\n          pin: stage,\\n          pinSpacing: false,\\n          pinType: 'transform'\\n        });\\n      }\\n\\n      \/* Linea: si riempie da quando il palco si aggancia a quando si sgancia *\/\\n      gsap.fromTo(fill, { height: '0%' }, {\\n        height: '100%',\\n        ease: 'none',\\n        scrollTrigger: {\\n          trigger: itemsEl,\\n          scroller: scroller,\\n          start: stickStart,\\n          endTrigger: lastTop,\\n          end: stickStart,\\n          scrub: true\\n        }\\n      });\\n\\n      \/* Con la testata fissa (solo desktop) la quota di aggancio e' il suo\\n         bordo inferiore e il tratto in cui il testo sfuma e' lo spazio\\n         sotto il paragrafo (--ry-vs-head-gap); senza testata il tratto\\n         e' TEXT_IN_WINDOW. *\/\\n      var withHead = false;\\n      if (head) { if (isDesktop) { withHead = true; } }\\n      function outLenPx() {\\n        if (withHead) { return Math.max(1, parseFloat(getComputedStyle(head).paddingBottom) || 0); }\\n        return Math.max(1, window.innerHeight * TEXT_IN_WINDOW \/ 100);\\n      }\\n\\n      \/* Numeri 2..N (si spengono tornando indietro; il numero acceso piu'\\n         recente copre i precedenti).\\n         - Desktop: lo step corrente e' quello con testo e immagine in\\n           vista, e il testo i entra mentre il testo i-1 sfuma sopra la\\n           quota. Il numero i si accende a meta' di quel crossfade, cioe'\\n           quando lo step i-1 e' salito di mezzo outLen oltre la quota,\\n           in sincrono con testo e immagine.\\n         - Tablet e mobile: il numero i si accende quando il suo step\\n           (immagine) arriva alla quota della linea. *\/\\n      items.forEach(function (item, i) {\\n        if (i === 0) { return; }\\n        var numTrigger = contentTop(item, isDesktop);\\n        var numStart = stickStart;\\n        if (isDesktop) {\\n          numTrigger = contentTop(items[i - 1], true);\\n          numStart = function () { return 'top ' + (stickPx() - outLenPx() \/ 2) + 'px'; };\\n        }\\n        ScrollTrigger.create({\\n          trigger: numTrigger,\\n          scroller: scroller,\\n          start: numStart,\\n          onEnter: function () { nums[i].classList.add('is-on'); },\\n          onLeaveBack: function () { nums[i].classList.remove('is-on'); }\\n        });\\n      });\\n\\n      \/* Transizioni (solo desktop): nel tratto di scambio dello step i la\\n         sua immagine lascia il posto alla successiva con la dissolvenza\\n         liquida (vedi sotto). *\/\\n      \/* Inizio dello scambio: a SWAP_AT% del viewport; con la testata fissa\\n         il punto e' invece la quota di aggancio (il testo sparisce sotto\\n         la testata, l'immagine lo segue subito). *\/\\n      function swapTopPx() {\\n        if (withHead) { return stickPx(); }\\n        return window.innerHeight * SWAP_AT \/ 100;\\n      }\\n      function swapStart() { return 'top ' + swapTopPx() + 'px'; }\\n      \/* Con la testata: scambio breve e fisso (SWAP_LEN), cosi' non si\\n         sovrappone mai allo scambio dello step successivo e resta in\\n         sincrono col testo. Senza: fino all'uscita dello step, come nel\\n         reference. *\/\\n      function swapEnd() {\\n        if (withHead) { return 'top ' + (stickPx() - window.innerHeight * SWAP_LEN \/ 100) + 'px'; }\\n        return 'bottom top';\\n      }\\n      function swapTrigger(item) {\\n        return {\\n          trigger: item,\\n          scroller: scroller,\\n          start: swapStart,\\n          end: swapEnd,\\n          scrub: true\\n        };\\n      }\\n      if (isDesktop) {\\n        \/* Reveal della pila (trigger = section, mai l'elemento agganciato) *\/\\n        if (reduced) {\\n          media.classList.add('is-in');\\n        } else {\\n          ScrollTrigger.create({\\n            trigger: root,\\n            scroller: scroller,\\n            start: REVEAL_AT,\\n            once: true,\\n            onEnter: function () { media.classList.add('is-in'); }\\n          });\\n        }\\n\\n        \/* Dissolvenza liquida: l'immagine in arrivo si dissolve sopra la\\n           corrente con un leggero zoom in uscita, mentre il displacement\\n           sale a LIQUID_PEAK a meta' scambio e torna a 0; la pila zooma\\n           fino a LIQUID_ZOOM e rientra, cosi' i bordi deformati restano\\n           fuori dalla cornice. Il filtro e' attivo solo durante lo scambio\\n           (costa alla GPU). Con motion ridotta: dissolvenza semplice. *\/\\n        function liquidTrigger(item) {\\n          var vars = swapTrigger(item);\\n          if (liquid) {\\n            vars.onToggle = function (self) {\\n              stack.style.filter = self.isActive ? 'url(#' + liquid.id + ')' : '';\\n            };\\n          }\\n          return vars;\\n        }\\n        for (var i = 0; count - 1 > i; i += 1) {\\n          var next = slides[i + 1];\\n          var tl = gsap.timeline({ scrollTrigger: liquidTrigger(items[i]) });\\n          tl.to(next, { opacity: 1, ease: 'power1.inOut', duration: 1 }, 0);\\n          tl.fromTo(next.querySelector('.ry-vslider__zoom'), { scale: 1.06 }, { scale: 1, ease: 'power2.out', duration: 1, immediateRender: false }, 0);\\n          if (liquid) {\\n            tl.to(liquid.disp, { attr: { scale: LIQUID_PEAK }, ease: 'sine.in', duration: 0.5 }, 0);\\n            tl.to(liquid.disp, { attr: { scale: 0 }, ease: 'sine.out', duration: 0.5 }, 0.5);\\n            tl.to(stack, { scale: LIQUID_ZOOM, ease: 'sine.in', duration: 0.5 }, 0);\\n            tl.to(stack, { scale: 1, ease: 'sine.out', duration: 0.5 }, 0.5);\\n          }\\n        }\\n\\n        \/* Testi: uno solo visibile alla volta.\\n           - Il testo corrente sfuma a 0 mentre il suo top sale oltre la\\n             quota di aggancio, nel tratto \\\"outLen\\\" (vedi outLenPx sopra):\\n             con la testata fissa arriva al paragrafo gia' trasparente.\\n           - Il testo successivo appare esattamente mentre il precedente\\n             sparisce (stessa curva, rovesciata) e resta pieno finche' non\\n             tocca a lui salire oltre la quota.\\n           - Tutti gli altri restano a 0. Il primo non sfuma in entrata,\\n             l'ultimo non sfuma in uscita.\\n           Opacita' calcolata dalle posizioni reali a ogni scroll: reversibile\\n           e senza conflitti anche con step vicini. *\/\\n        var bodies = items.map(function (item) { return item.querySelector('.ry-vslider__body'); });\\n        \/* 0..1: quanto il testo k e' salito oltre la quota, sul tratto outLen *\/\\n        function outProgress(k) {\\n          var r = bodies[k].getBoundingClientRect();\\n          var q = stickPx();\\n          if (r.top >= q) { return 0; }\\n          return Math.min(1, (q - r.top) \/ outLenPx());\\n        }\\n        function applyTextOpacity() {\\n          bodies.forEach(function (body, k) {\\n            var o = 1;\\n            if (k > 0) { o = outProgress(k - 1); }\\n            if (count - 1 > k) { o = Math.min(o, 1 - outProgress(k)); }\\n            body.style.opacity = String(Math.max(0, Math.min(1, o)));\\n          });\\n        }\\n        bodies.forEach(function (body) {\\n          ScrollTrigger.create({\\n            trigger: body,\\n            scroller: scroller,\\n            start: 'top bottom',\\n            end: 'bottom top',\\n            onUpdate: applyTextOpacity,\\n            onToggle: applyTextOpacity,\\n            onRefresh: applyTextOpacity\\n          });\\n        });\\n        applyTextOpacity();\\n      } else {\\n        \/* Tablet e mobile: il blocco (immagine + testo) che sale oltre la\\n           quota del numero si attenua gradualmente fino a MOBILE_DIM nel\\n           tratto MOBILE_DIM_RANGE; l'ultimo resta pieno. Calcolato dalla\\n           posizione reale a ogni scroll, reversibile. *\/\\n        function applyItemOpacity() {\\n          var q = stickPx();\\n          var range = Math.max(1, window.innerHeight * MOBILE_DIM_RANGE \/ 100);\\n          items.forEach(function (item, k) {\\n            var o = 1;\\n            if (count - 1 > k) {\\n              var r = item.getBoundingClientRect();\\n              if (q > r.top) {\\n                var p = Math.min(1, (q - r.top) \/ range);\\n                o = 1 - (1 - MOBILE_DIM) * p;\\n              }\\n            }\\n            item.style.opacity = String(o);\\n          });\\n        }\\n        items.forEach(function (item) {\\n          ScrollTrigger.create({\\n            trigger: item,\\n            scroller: scroller,\\n            start: 'top bottom',\\n            end: 'bottom top',\\n            onUpdate: applyItemOpacity,\\n            onToggle: applyItemOpacity,\\n            onRefresh: applyItemOpacity\\n          });\\n        });\\n        applyItemOpacity();\\n      }\\n\\n      \/* Se cambia l'altezza dei testi (font, immagini, resize) si ricalcola tutto *\/\\n      var refreshTO;\\n      function scheduleRefresh() {\\n        clearTimeout(refreshTO);\\n        refreshTO = setTimeout(function () { ScrollTrigger.refresh(); }, 120);\\n      }\\n      var observer = null;\\n      if (typeof ResizeObserver !== 'undefined') {\\n        observer = new ResizeObserver(scheduleRefresh);\\n        observer.observe(root.querySelector('.ry-vslider__items'));\\n      }\\n\\n      return function cleanup() {\\n        ScrollTrigger.removeEventListener('refreshInit', beforeMeasure);\\n        ScrollTrigger.removeEventListener('refresh', afterMeasure);\\n        afterMeasure();\\n        if (observer) { observer.disconnect(); }\\n        clearTimeout(refreshTO);\\n        lastBody.style.minHeight = '';\\n        track.style.height = '';\\n        track.style.bottom = '';\\n        track.style.top = '';\\n        root.style.removeProperty('--ry-vs-top');\\n        itemsEl.style.paddingTop = '';\\n        if (headwrap) { headwrap.style.height = ''; }\\n        items.forEach(function (item) { item.querySelector('.ry-vslider__body').style.opacity = ''; item.style.opacity = ''; });\\n        nums.forEach(function (num, i) { num.classList.toggle('is-on', i === 0); });\\n      };\\n    }\\n  }\\n\\n  function init() {\\n    gsap.registerPlugin(ScrollTrigger);\\n    var scroller = integrateLenis();\\n    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\\n    var roots = toArray(document.querySelectorAll(ROOT_SEL));\\n    roots.forEach(function (root) { setup(root, scroller, reduced); });\\n    console.log('[ry-vslider] attivo su ' + roots.length + ' sezione\/i');\\n\\n    if (document.fonts) {\\n      if (document.fonts.ready) { document.fonts.ready.then(function () { ScrollTrigger.refresh(); }); }\\n    }\\n    window.addEventListener('load', function () { ScrollTrigger.refresh(); }, { once: true });\\n  }\\n\\n  if (document.readyState === 'loading') {\\n    document.addEventListener('DOMContentLoaded', function () { ensureGsap(init); });\\n  } else {\\n    ensureGsap(init);\\n  }\\n})();\\n<\/script>\\n\",\"css\":\".el-element{\\n    padding-top: 110px;\\n    padding-bottom: 110px;\\n}\\n@media screen and (max-width: 1200px){\\n .el-element{\\n    padding-top: 70px;\\n    padding-bottom: 70px;\\n}   \\n}\"},\"name\":\"06 metodo section\"}]}]}]}]}]}],\"name\":\"Metodo scientifico e partnership\"},{\"type\":\"section\",\"props\":{\"animation_delay\":\"200\",\"id\":\"partnership\",\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"large\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"expand\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 07. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"}},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"\\nProgettata per le partnership\\nindustriali.\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}}]}]},{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"vertical_align\":\"bottom\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"}},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot\\\">Partnership industriali\\n<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"}},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo\",\"column_breakpoint\":\"m\",\"content\":\"Reytera affianca realt\u00e0 industriali che richiedono sviluppo su specifica, continuit\u00e0 e\\nriservatezza. Ogni collaborazione \u00e8 costruita intorno al brief, proteggendo informazioni,\\nprotocolli e risultati lungo l\u2019intero percorso.\",\"margin_bottom\":\"default\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\"}}]}],\"props\":{\"layout\":\"1-2,1-2\",\"margin_bottom\":\"large\"}}],\"name\":\"Partnership industriali\"},{\"type\":\"section\",\"props\":{\"class\":\"uk-visible@m\",\"image_position\":\"center-center\",\"padding_top\":\"small\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<section class=\"rt-palette2\" data-rt-palette2 aria-label=\"Palette\"\r\n\tdata-rt-cursor=\"yes\"\r\n\tdata-rt-cursor-text=\"Esplora le card\">\r\n\t\t<article class=\"rt-palette2__col is-open\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"true\"\r\n\t\t\taria-controls=\"rt-palette2-2-1\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Stabile<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-2-1\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"rt2g1-2\" cx=\"38%\" cy=\"30%\" r=\"80%\"><stop offset=\"0%\" stop-color=\"#C79B85\"\/><stop offset=\"55%\" stop-color=\"#A47864\"\/><stop offset=\"100%\" stop-color=\"#7C5240\"\/><\/radialGradient><\/defs><ellipse cx=\"150\" cy=\"232\" rx=\"98\" ry=\"14\" fill=\"#A47864\" opacity=\".22\"\/><path fill=\"url(#rt2g1-2)\" d=\"M150 22c46 0 96 28 104 74 8 44-18 96-58 112-42 17-102 6-126-32-24-39-8-98 22-126 18-17 36-28 58-28z\"\/><path fill=\"#fff\" opacity=\".14\" d=\"M108 60c20-16 52-22 74-12-30-2-58 10-74 12z\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Stabile<\/h3>\r\n\t\t\t\t<p>Una base solida e senza tempo. Tonalit\u00e0 terrose che comunicano affidabilit\u00e0, durano oltre le mode e danno peso a ogni scelta di design.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t\t<article class=\"rt-palette2__col\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"false\"\r\n\t\t\taria-controls=\"rt-palette2-2-2\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Naturale<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-2-2\" aria-hidden=\"true\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"rt2g2-2\" cx=\"35%\" cy=\"28%\" r=\"75%\"><stop offset=\"0%\" stop-color=\"#D9B49E\"\/><stop offset=\"60%\" stop-color=\"#B08468\"\/><stop offset=\"100%\" stop-color=\"#83573F\"\/><\/radialGradient><\/defs><ellipse cx=\"150\" cy=\"234\" rx=\"92\" ry=\"13\" fill=\"#A47864\" opacity=\".22\"\/><circle cx=\"150\" cy=\"122\" r=\"86\" fill=\"url(#rt2g2-2)\"\/><ellipse cx=\"150\" cy=\"150\" rx=\"122\" ry=\"26\" fill=\"none\" stroke=\"#FF5500\" stroke-width=\"3\" opacity=\".85\" transform=\"rotate(-14 150 150)\"\/><circle cx=\"116\" cy=\"86\" r=\"18\" fill=\"#fff\" opacity=\".16\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Naturale<\/h3>\r\n\t\t\t\t<p>Texture organiche e materia viva. Il calore della terra porta l'esterno dentro l'esperienza digitale, con superfici che sembrano vere.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t\t<article class=\"rt-palette2__col\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"false\"\r\n\t\t\taria-controls=\"rt-palette2-2-3\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Autentico<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-2-3\" aria-hidden=\"true\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><linearGradient id=\"rt2g3-2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0%\" stop-color=\"#CDA28A\"\/><stop offset=\"100%\" stop-color=\"#8A5F47\"\/><\/linearGradient><\/defs><ellipse cx=\"150\" cy=\"236\" rx=\"104\" ry=\"13\" fill=\"#A47864\" opacity=\".22\"\/><path fill=\"url(#rt2g3-2)\" d=\"M42 190c0-58 26-128 108-128 66 0 108 44 108 96 0 14-8 26-24 26-30 0-22-78-84-78-56 0-56 60-76 84-14 17-32 14-32 0z\"\/><path fill=\"#fff\" opacity=\".12\" d=\"M84 96c22-24 56-36 88-30-40 2-70 16-88 30z\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Autentico<\/h3>\r\n\t\t\t\t<p>Diretto e senza filtri. Sfumature calde e familiari che rendono ogni interazione genuina, vicina, immediatamente riconoscibile.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t\t<article class=\"rt-palette2__col\">\r\n\t\t<button type=\"button\" class=\"rt-palette2__label\"\r\n\t\t\taria-expanded=\"false\"\r\n\t\t\taria-controls=\"rt-palette2-2-4\">\r\n\t\t\t<span class=\"rt-palette2__chip\" aria-hidden=\"true\"><\/span>\r\n\t\t\t<span class=\"rt-palette2__name\">Colonna 4<\/span>\r\n\t\t<\/button>\r\n\t\t\t\t<div class=\"rt-palette2__content\" id=\"rt-palette2-2-4\" aria-hidden=\"true\">\r\n\t\t\t<figure class=\"rt-palette2__media\">\r\n\t\t\t\t<svg viewBox=\"0 0 300 260\" aria-hidden=\"true\" focusable=\"false\"><defs><radialGradient id=\"rt2g4-2\" cx=\"40%\" cy=\"32%\" r=\"78%\"><stop offset=\"0%\" stop-color=\"#CBB79C\"\/><stop offset=\"58%\" stop-color=\"#9C8464\"\/><stop offset=\"100%\" stop-color=\"#6E5A3C\"\/><\/radialGradient><\/defs><ellipse cx=\"150\" cy=\"234\" rx=\"96\" ry=\"13\" fill=\"#A47864\" opacity=\".22\"\/><rect x=\"70\" y=\"52\" width=\"160\" height=\"140\" rx=\"26\" fill=\"url(#rt2g4-2)\"\/><path fill=\"#fff\" opacity=\".13\" d=\"M96 78c22-14 58-18 82-8-32-2-64 6-82 8z\"\/><\/svg>\t\t\t\t\t\t\t\t<div class=\"rt-markers2\" aria-hidden=\"true\">\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:100%;--y:78%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:-10%;--y:50%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"rt-marker2\" style=\"--x:70%;--y:2%\"><\/span>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t<div class=\"rt-palette2__caption\">\r\n\t\t\t\t<h3 class=\"ry-blur\">Colonna 4<\/h3>\r\n\t\t\t\t<p>Testo segnaposto della quarta colonna. Sostituiscilo con il tuo contenuto.<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/article>\r\n\t<\/section>\r\n\t\t\"}}]}]}],\"name\":\"desk partnership\"},{\"type\":\"section\",\"props\":{\"animation\":\"fade\",\"class\":\"uk-hidden@m\",\"css\":\".el-section{\\n    padding-left:5px;\\n    padding-right: 5px;\\n}\",\"image_position\":\"center-center\",\"padding_bottom\":\"small\",\"padding_top\":\"xsmall\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"props\":{\"class\":\"uk-hidden@m\",\"css\":\"@media (min-width: 960px) {\\n\\t.el-row {\\n        margin-top: -100vh;\\n        height: 100vh;\\n    }\\n}\",\"layout\":\"1-6,1-6,1-6,1-6,1-6,1-6|1-3,1-3,1-3,1-3,1-3,1-3\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"15vh - 15%\",\"width_medium\":\"1-6\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"content\":\"Non proponiamo soluzioni predefinite. Ogni progetto nasce dalle esigenze del cliente e si sviluppa attraverso un percorso botanico, tecnico e analitico dedicato.\\n<\/p>\n<div class=\\\"rt-markers-box\\\">\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:45%; --y:-250px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:30%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:70%; --y:-150px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n\\n     <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:65%; --y:-280px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/div>\n<p>\\n\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    position: absolute;\\n    top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n    padding-right: 20px;\\n}\\n.el-meta span {\\n    margin-right: 15px;\\n}\\n.el-image{\\n    padding-top:30px;\\n    position: relative;\\n    top:25px;\\n}\\n.uk-card-media-top {\\n    text-align: center;\\n}\\n.uk-card-media-top .el-image {\\n    display: block;\\n    margin-left: auto;\\n    margin-right: auto;\\n}\\n\\n.el-content span{\\n    position: absolute;\\n    z-index: 5;\\n}\",\"height_expand\":true,\"image\":\"\/wp-content\/uploads\/2026\/09\/sviluppo-su-specifica-1-3.jpg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 01 <span> Sviluppo <\/span> \",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Sviluppo su specifica e approccio di partnership\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"15vh - 15%\",\"width_medium\":\"1-6\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"content\":\"Informazioni, obiettivi, dati e attivit\u00e0 di sviluppo restano all\u2019interno del perimetro della singola collaborazione e vengono gestiti secondo modalit\u00e0 concordate con il cliente.\\n<\/p>\n<div class=\\\"rt-markers-box\\\">\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:45%; --y:-240px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:28%; --y:-130px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n     <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:65%; --y:-130px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n       <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-150px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n         <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:48%; --y:-270px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/div>\n<p>\\n\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    position: absolute;\\n    top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n    padding-right: 20px;\\n}\\n.el-meta span {\\n    margin-right: 15px;\\n}\\n.el-image{\\n    padding-top:30px;\\n    position: relative;\\n    top:25px;\\n}\\n.uk-card-media-top {\\n    text-align: center;\\n}\\n.uk-card-media-top .el-image {\\n    display: block;\\n    margin-left: auto;\\n    margin-right: auto;\\n}\\n\\n.el-content span{\\n    position: absolute;\\n    z-index: 5;\\n}\\n\",\"height_expand\":true,\"image\":\"\/wp-content\/uploads\/2026\/09\/Riservatezza.jpg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 02 <span>Riservatezza<\/span>\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Riservatezza del brief e perimetro del progetto\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"15vh - 15%\",\"width_medium\":\"1-6\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"content\":\"Processi e protocolli vengono definiti per il singolo progetto. Le modalit\u00e0 di utilizzo, tutela e condivisione del know-how sviluppato vengono concordate con il cliente.\\n<\/p>\n<div class=\\\"rt-markers-box\\\">\\n  <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:45%; --y:-250px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:30%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:70%; --y:-150px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n\\n     <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:35%; --y:-280px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/div>\n<p>\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    position: absolute;\\n    top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n    padding-right: 20px;\\n}\\n.el-meta span {\\n    margin-right: 15px;\\n}\\n.el-image{\\n    padding-top:30px;\\n    position: relative;\\n    top:25px;\\n}\\n.uk-card-media-top {\\n    text-align: center;\\n}\\n.uk-card-media-top .el-image {\\n    display: block;\\n    margin-left: auto;\\n    margin-right: auto;\\n}\\n\\n.el-content span{\\n    position: absolute;\\n    z-index: 5;\\n}\",\"height_expand\":true,\"image\":\"\/wp-content\/uploads\/2026\/09\/Protocolli-img.jpg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 03 <span>Protocolli<\/span>\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Protocolli dedicati e gestione del know-how\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"15vh - 15%\",\"width_medium\":\"1-6\",\"width_small\":\"1-1\"},\"children\":[{\"type\":\"panel\",\"props\":{\"animation\":\"parallax\",\"class\":\"ry-glass-panel mob\",\"content\":\"Quando il progetto lo richiede, possono essere definite formule di esclusivit\u00e0 o co- sviluppo, con ambito, durata e condizioni stabiliti caso per caso.\\n<\/p>\n<div class=\\\"rt-markers-box\\\">\\n     <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:65%; --y:-250px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:30%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-visible@s\\\" style=\\\"--x:58%; --y:-130px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n\\n     <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:65%; --y:-280px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:10%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n    <span class=\\\"rt-marker uk-hidden@s\\\" style=\\\"--x:70%; --y:-180px;\\\" aria-hidden=\\\"true\\\"><\/span>\\n  <\/div>\n<p>\\n\",\"content_column_breakpoint\":\"m\",\"content_margin\":\"small\",\"css\":\".el-element{\\n    position: relative;\\n}\\n.el-meta{\\n    position: absolute;\\n    top:15px;\\n   color: #3e6f62;\\n    font-size: 15px;\\n    font-weight: 700;\\n    letter-spacing: .02em;\\n    text-transform: uppercase;\\n    white-space: nowrap;\\n  display: flex;\\n    justify-content: space-between;\\n    width: 100%;\\n    box-sizing: border-box;\\n    padding-right: 20px;\\n}\\n.el-meta span {\\n    margin-right: 15px;\\n}\\n.el-image{\\n    padding-top:30px;\\n    position: relative;\\n    top:25px;\\n}\\n.uk-card-media-top {\\n    text-align: center;\\n}\\n.uk-card-media-top .el-image {\\n    display: block;\\n    margin-left: auto;\\n    margin-right: auto;\\n}\\n\\n.el-content span{\\n    position: absolute;\\n    z-index: 5;\\n}\",\"height_expand\":true,\"image\":\"\/wp-content\/uploads\/2026\/09\/co-sviluppo.jpg\",\"image_align\":\"top\",\"image_expand\":false,\"image_grid_breakpoint\":\"m\",\"image_grid_width\":\"1-2\",\"image_loading\":true,\"image_svg_color\":\"emphasis\",\"image_width\":150,\"link_style\":\"default\",\"link_text\":\"Read more\",\"margin_bottom\":\"remove\",\"margin_top\":\"default\",\"meta\":\"\/ 04 <span>co-sviluppo<\/span>\",\"meta_align\":\"above-title\",\"meta_element\":\"div\",\"meta_margin\":\"remove\",\"meta_style\":\"h6\",\"panel_image_no_padding\":true,\"panel_padding\":\"small\",\"panel_style\":\"card-default\",\"parallax_blur\":\"10,0 15%\",\"parallax_opacity\":\"0,1 15%\",\"title\":\"Possibilit\u00e0 di percorsi di esclusivit\u00e0 o co-sviluppo\",\"title_align\":\"top\",\"title_element\":\"h3\",\"title_grid_breakpoint\":\"m\",\"title_grid_width\":\"1-2\",\"title_hover_style\":\"reset\",\"title_style\":\"h2\"},\"name\":\"slider\"}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"15vh - 15%\",\"width_medium\":\"1-6\",\"width_small\":\"1-1\"}},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky\":\"section\",\"position_sticky_breakpoint\":\"\",\"position_sticky_offset\":\"15vh - 15%\",\"width_medium\":\"1-6\",\"width_small\":\"1-1\"}}]}],\"name\":\"Metodo scientifico mob\"},{\"type\":\"section\",\"props\":{\"image_effect\":\"parallax\",\"image_parallax_bgy\":\"5vh,5vh\",\"image_parallax_breakpoint\":\"s\",\"image_position\":\"bottom-left\",\"image_width\":600,\"media_focal_point\":\"bottom-left\",\"padding_bottom\":\"large\",\"padding_top\":\"large\",\"style\":\"muted\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"expand\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_effect\":\"parallax\",\"image_parallax_bgy\":\"-5vh,5vh\",\"image_parallax_easing\":\"0.5\",\"image_position\":\"center-center\",\"image_size\":\"cover\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"[ 08. ]\",\"css\":\".el-element{\\nfont-weight: bold;\\n}\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"small\",\"maxwidth\":\"small\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_color\":\"primary\",\"title_element\":\"div\",\"title_style\":\"h5\"}},{\"type\":\"headline\",\"props\":{\"class\":\"ry-blur\",\"content\":\"Se hai una sfida sulla materia prima?\\n<br class=\\\"uk-visible@m\\\">Costruiamo insieme la risposta.\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"xsmall\",\"margin_top\":\"remove\",\"title_element\":\"h3\",\"title_style\":\"heading-large\"}},{\"type\":\"fragment\",\"props\":{\"margin_bottom\":\"default\",\"margin_top\":\"medium\"},\"children\":[{\"type\":\"row\",\"props\":{\"layout\":\"1-2,1-2\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"image\",\"props\":{\"image\":\"wp-content\/uploads\/2026\/08\/reytera-asset-2-2-1.png\",\"image_svg_color\":\"emphasis\",\"image_width\":400,\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"text_align\":\"center\"}}]},{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\",\"width_medium\":\"1-2\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<div class=\\\"divider\\\"><\/div>\n<p>\"},\"name\":\"divider semplice\"},{\"type\":\"headline\",\"props\":{\"animation\":\"parallax\",\"content\":\"<span class=\\\"label-dot \\\">Parliamone<\/span>\",\"image_align\":\"left\",\"image_margin\":\"xsmall\",\"margin_bottom\":\"default\",\"margin_top\":\"default\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\",\"title_element\":\"div\",\"title_style\":\"h6\"},\"name\":\"small \"},{\"type\":\"text\",\"props\":{\"animation\":\"parallax\",\"class\":\"paragrafo testi-effect\",\"column_breakpoint\":\"m\",\"content\":\"Variabilit\u00e0, continuit\u00e0, performance o sviluppo di un nuovo ingrediente: condividi con noi il\\ntuo obiettivo. Valuteremo come tradurlo in un percorso botanico ed estrattivo sviluppato su\\nspecifica.\",\"margin_bottom\":\"default\",\"margin_top\":\"medium\",\"parallax_blur\":\"10,0 20%\",\"parallax_opacity\":\"0,1 20%\"},\"name\":\"paragrafo\"},{\"type\":\"html\",\"props\":{\"content\":\"<a class=\\\"rcta rcta--primary rcta--green rcta--pill rcta--sm\\\" href=\\\"mailto:info@reytera.it\\\" data-rcta>\\n  <span class=\\\"rcta__text\\\"><span class=\\\"rcta__label\\\">Scrivici per approfondire una partnership<\/span><\/span>\\n<\/a>\",\"visibility\":\"s\"},\"name\":\"CTA\"},{\"type\":\"html\",\"props\":{\"content\":\"<a class=\\\"rcta rcta--primary rcta--green rcta--pill rcta--sm\\\" href=\\\"mailto:info@reytera.it\\\" data-rcta>\\n  <span class=\\\"rcta__text\\\"><span class=\\\"rcta__label\\\">Proponi una partnership<\/span><\/span>\\n<\/a>\",\"visibility\":\"hidden-s\"},\"name\":\"CTA\"}]}]}]}]}]}]},{\"type\":\"section\",\"props\":{\"class\":\"uk-visible@s\",\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<nav class=\\\"cc-navbar\\\" aria-label=\\\"Navigazione sezioni\\\">\\n  <\/p>\n<div class=\\\"cc-navbar__control\\\">\\n    <\/p>\n<div class=\\\"cc-navbar__thumb\\\"><\/div>\n<p>\\n    <a class=\\\"cc-navbar__item\\\" href=\\\"#piattaforma\\\" data-cc-link>Piattaforma<\/a>\\n    <a class=\\\"cc-navbar__item\\\" href=\\\"#output\\\"      data-cc-link>Output<\/a>\\n    <a class=\\\"cc-navbar__item\\\" href=\\\"#tecnologia\\\"  data-cc-link>Tecnologia<\/a>\\n    <a class=\\\"cc-navbar__item\\\" href=\\\"#metodo\\\"      data-cc-link>Metodo<\/a>\\n    <a class=\\\"cc-navbar__item\\\" href=\\\"#partnership\\\" data-cc-link>Partnership<\/a>\\n  <\/div>\n<p>\\n<\/nav>\n<p>\\n\\n<\/p>\n<style>\\n.cc-navbar {\\n  position: fixed;\\n  bottom: 14px;\\n  left: 50%;\\n  transform: translateX(-50%);\\n  z-index: 999;\\n  display: flex;\\n  justify-content: center;\\n  font-family: Aptos, Arial, sans-serif;\\n}\\n.cc-navbar__control {\\n  position: relative;\\n  display: grid;\\n  grid-auto-flow: column;\\n  grid-auto-columns: 1fr;\\n  align-items: center;\\n  padding: 5px;\\n    gap:5px;\\n  border-radius: 999px;\\n  background: rgba(255, 255, 255, 0.52);\\n  box-shadow:\\n    inset 0 0 0 1px rgba(15, 23, 42, 0.05),\\n    0 2px 8px rgba(15, 23, 42, 0.08);\\n  backdrop-filter: blur(12px);\\n  -webkit-backdrop-filter: blur(12px);\\n}\\n.cc-navbar__thumb {\\n  position: absolute;\\n  top: 5px;\\n  left: 5px;\\n  height: calc(100% - 10px);\\n  border-radius: 999px;\\n  background: #192B35;\\n  box-shadow:\\n    0 1px 2px rgba(15, 23, 42, 0.2),\\n    0 8px 20px rgba(15, 23, 42, 0.16);\\n  transition:\\n    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),\\n    width 420ms cubic-bezier(0.22, 1, 0.36, 1),\\n    opacity 260ms ease;\\n  will-change: transform, width;\\n  pointer-events: none;\\n  opacity: 0;\\n}\\n.cc-navbar__thumb.is-visible {\\n  opacity: 1;\\n}\\n.cc-navbar__item {\\n  position: relative;\\n    text-transform: uppercase;\\n  z-index: 1;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  height: 36px;\\n  padding: 0 20px;\\n  border-radius: 999px;\\n  color: var(--petrol);\\n  font-size: 13px;\\n  font-weight: 600;\\n  line-height: 1;\\n  text-decoration: none;\\n  white-space: nowrap;\\n  cursor: pointer;\\n  user-select: none;\\n  transition: color 260ms ease, background-color 260ms ease;\\n}\\n.cc-navbar__item:hover {\\n  background-color: #DCE8E2;\\n \/* color: #111827;*\/\\n}\\n.cc-navbar__item.is-current {\\n  color: #ffffff;\\n}\\n.cc-navbar__item.is-current:hover {\\n  background-color: transparent;\\n  color: #ffffff;\\n}\\n@media (prefers-reduced-motion: reduce) {\\n  .cc-navbar__thumb,\\n  .cc-navbar__item {\\n    transition: none;\\n  }\\n}\\n\/*MOB*\/\\n        @media screen and (max-width: 576px) {\\n.cc-navbar__item {\\nfont-size: 11px;\\n      height: 32px;\\n     padding: 0 7px;\\n}\\n        .cc-navbar {\\n  position: fixed;\\n  bottom: 10px;\\n        }\\n            .cc-navbar__control {\\n  position: relative;\\n  display: grid;\\n  grid-auto-flow: column;\\n  grid-auto-columns: 1fr;\\n  align-items: center;\\n  padding: 5px;\\n    gap:2px;\\n            }\\n    }\\n<\/style>\n<p>\\n\\n<script>\\n(function () {\\n  var navbar = document.querySelector('.cc-navbar');\\n  if (!navbar) return;\\n\\n  var control = navbar.querySelector('.cc-navbar__control');\\n  var thumb   = navbar.querySelector('.cc-navbar__thumb');\\n  var items   = Array.prototype.slice.call(navbar.querySelectorAll('.cc-navbar__item'));\\n  var current = null;\\n\\n  \/\/ Sposta il thumb sotto un item specifico\\n  function moveThumbTo(item) {\\n    if (!item) return;\\n    var cRect = control.getBoundingClientRect();\\n    var iRect = item.getBoundingClientRect();\\n    thumb.style.width = iRect.width + 'px';\\n    thumb.style.transform = 'translateX(' + (iRect.left - cRect.left - 5) + 'px)';\\n  }\\n\\n  \/\/ Attiva un item (thumb visibile + testo bianco) oppure lo nasconde se item = null\\n  function setCurrent(item) {\\n    current = item;\\n    items.forEach(function (el) { el.classList.remove('is-current'); });\\n    if (item) {\\n      item.classList.add('is-current');\\n      moveThumbTo(item);\\n      thumb.classList.add('is-visible');\\n    } else {\\n      thumb.classList.remove('is-visible');\\n    }\\n  }\\n\\n  \/\/ Collega ogni item alla sua section\\n  var tracked = items\\n    .map(function (item) {\\n      var id = item.getAttribute('href');\\n      var section = id && id.charAt(0) === '#' ? document.querySelector(id) : null;\\n      return section ? { item: item, section: section } : null;\\n    })\\n    .filter(Boolean);\\n\\n  \/\/ Tiene traccia delle section attualmente visibili nella banda centrale\\n  var visible = new Set();\\n\\n  if ('IntersectionObserver' in window && tracked.length) {\\n    var observer = new IntersectionObserver(function (entries) {\\n      entries.forEach(function (entry) {\\n        var found = tracked.filter(function (t) { return t.section === entry.target; })[0];\\n        if (!found) return;\\n        if (entry.isIntersecting) visible.add(found);\\n        else visible.delete(found);\\n      });\\n\\n      if (visible.size) {\\n        \/\/ Section visibile pi\u00f9 in alto nel documento\\n        var top = Array.from(visible).sort(function (a, b) {\\n          return a.section.getBoundingClientRect().top - b.section.getBoundingClientRect().top;\\n        })[0];\\n        setCurrent(top.item);\\n      } else {\\n        setCurrent(null);\\n      }\\n    }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });\\n\\n    tracked.forEach(function (t) { observer.observe(t.section); });\\n  }\\n\\n  window.addEventListener('resize', function () {\\n    if (current) moveThumbTo(current);\\n  });\\n})();\\n<\/script>\"},\"name\":\"navbar fixed\"}]}]}],\"name\":\"desk\"},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"props\":{\"margin_bottom\":\"remove\",\"margin_top\":\"remove\"},\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<style>\\n  .ry-cards-pager {\\n    position: fixed;\\n    top: 0;\\n    left: var(--ry-pager-left, 60px);\\n    z-index: 90;\\n    display: flex;\\n    align-items: center;\\n    height: 100vh;\\n    pointer-events: none;      \/* non intercetta i click sulla pagina *\/\\n    opacity: 0;\\n    transition: opacity .3s ease;\\n  }\\n  .ry-cards-pager.is-visible { opacity: 1; }\\n\\n  .ry-card-pager {\\n    position: relative;\\n    box-sizing: content-box;\\n    width: 8px;\\n    height: 8px;               \/* chiusa: si vede solo la palina *\/\\n    \/* il testo ruotato e piu spesso di 8px: il padding orizzontale\\n       (compensato dal margine negativo) allarga la zona di ritaglio\\n       senza spostare nulla, cosi le lettere non vengono rasate *\/\\n    padding-left: 10px;\\n    padding-right: 10px;\\n    margin-left: -10px;\\n    margin-bottom: 20px;\\n    overflow: hidden;\\n    transition: height .8s ease;\\n  }\\n  .ry-card-pager:last-of-type { margin-bottom: 0; }\\n  .ry-card-pager.active { height: var(--ry-pager-open, 80px); }\\n\\n  .ry-card-hider {\\n    position: absolute;\\n    bottom: 0;\\n    display: flex;\\n    align-items: flex-end;\\n    height: var(--ry-pager-open, 80px);\\n  }\\n  .ry-pager-bullet {\\n    width: 8px;\\n    height: 8px;\\n    border-radius: 50%;\\n    background: var(--ry-pager-color, #3E6F62);\\n    opacity: .2;\\n    transition: opacity .4s ease;\\n  }\\n  .ry-card-pager.active .ry-pager-bullet { opacity: 1; }\\n\\n  .ry-pager-label {\\n    position: absolute;\\n    top: var(--ry-label-top, 33px);\\n    left: var(--ry-label-left, -36px);\\n    width: var(--ry-label-width, 80px);\\n    font-family: Aptos, \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif;\\n    font-size: 14px;\\n    line-height: 16px;\\n    font-weight: 700;\\n    letter-spacing: -.02em;\\n    text-transform: uppercase;\\n    text-align: left;\\n    color: var(--ry-pager-color, #3E6F62);\\n    transform: rotate(-90deg);\\n    opacity: 0;\\n    transition: opacity 1.8s ease;\\n    white-space: nowrap;\\n  }\\n  .ry-card-pager.active .ry-pager-label { opacity: 1; }\\n\\n  @media (max-width: 1023px) {\\n    .ry-cards-pager { display: none; }\\n  }\\n<\/style>\n<p>\\n\\n<script>\\n(function () {\\n  \\\"use strict\\\";\\n\\n  \/* ===== LE TUE CARD: nome nel builder e titoletto del pager ===== *\/\\n  var CARDS = [\\n    { id: \\\"card-1\\\", label: \\\"Seme\\\" },\\n    { id: \\\"card-2\\\", label: \\\"Coltivazione\\\" },\\n    { id: \\\"card-3\\\", label: \\\"Fresco\\\" },\\n    { id: \\\"card-4\\\", label: \\\"Essiccazione\\\" },\\n    { id: \\\"card-5\\\", label: \\\"Estrazione\\\" }\\n  ];\\n\\n  var OPZIONI = {\\n    pagerLeft: \\\"60px\\\",       \/* distanza del pager dal bordo sinistro *\/\\n    colore: \\\"#3E6F62\\\",       \/* colore di paline e titoletti *\/\\n    soglia: 0.85,            \/* quando si accende la card nuova:\\n                                0.85 = appena entra dal basso,\\n                                0.5 = a meta schermo, 0.2 = in alto *\/\\n    gestisciVideo: true      \/* pausa i video delle card coperte *\/\\n  };\\n  \/* ================ da qui in giu non serve toccare ================ *\/\\n\\n  if (window.ryCardPagerAttivo) { return; }   \/* niente doppioni *\/\\n  window.ryCardPagerAttivo = true;\\n\\n  \/* Il nome della card puo essere un ID oppure una classe *\/\\n  function findCard(name) {\\n    var byId = document.getElementById(name);\\n    if (byId) { return byId; }\\n    return document.querySelector(\\\".\\\" + name);\\n  }\\n\\n  function init() {\\n    var cards = [];\\n    var labels = [];\\n    CARDS.forEach(function (entry) {\\n      var el = findCard(entry.id);\\n      if (el) {\\n        cards.push(el);\\n        labels.push(entry.label);\\n      } else {\\n        console.warn('[card-pager] card non trovata: nessun elemento con id o classe \\\"' + entry.id + '\\\"');\\n      }\\n    });\\n    if (cards.length === 0) { return; }\\n\\n    \/* Lo sticky lo fa il builder: cerchiamo, per ogni card, l antenato\\n       con lo Sticky di UIkit. E lui a dirci quando la card si aggancia\\n       (classe uk-active). Nessuna modifica agli elementi. *\/\\n    function trovaSticky(card) {\\n      var nodo = card;\\n      while (nodo) {\\n        if (nodo === document.body) { return null; }\\n        if (nodo.hasAttribute) {\\n          if (nodo.hasAttribute(\\\"uk-sticky\\\")) { return nodo; }\\n          if (nodo.hasAttribute(\\\"data-uk-sticky\\\")) { return nodo; }\\n        }\\n        nodo = nodo.parentElement;\\n      }\\n      return null;\\n    }\\n\\n    var stickies = cards.map(trovaSticky);\\n    var almenoUno = stickies.some(function (s) { return s !== null; });\\n    if (!almenoUno) {\\n      console.warn(\\\"[card-pager] nota: Sticky del builder non rilevato sulle colonne. Il pager funziona lo stesso, ma senza Sticky le card non si impilano.\\\");\\n    }\\n\\n    console.log(\\\"[card-pager] attivo su \\\" + cards.length + \\\" card\\\");\\n\\n    \/* ---- Pager: l unica cosa che questo blocco aggiunge ---- *\/\\n    var pager = document.createElement(\\\"div\\\");\\n    pager.className = \\\"ry-cards-pager\\\";\\n    pager.style.setProperty(\\\"--ry-pager-color\\\", OPZIONI.colore);\\n    pager.style.setProperty(\\\"--ry-pager-left\\\", OPZIONI.pagerLeft);\\n\\n    \/* contenitore interno: dentro il flex del pager le paline vanno\\n       in un blocco verticale, appese direttamente verrebbero\\n       disposte in riga e schiacciate *\/\\n    var pagerInner = document.createElement(\\\"div\\\");\\n\\n    labels.forEach(function (label, i) {\\n      var item = document.createElement(\\\"div\\\");\\n      item.className = \\\"ry-card-pager\\\";\\n      item.dataset.id = String(i + 1);\\n\\n      var hider = document.createElement(\\\"div\\\");\\n      hider.className = \\\"ry-card-hider\\\";\\n\\n      var labelEl = document.createElement(\\\"div\\\");\\n      labelEl.className = \\\"ry-pager-label\\\";\\n      labelEl.textContent = label;\\n\\n      var bullet = document.createElement(\\\"div\\\");\\n      bullet.className = \\\"ry-pager-bullet\\\";\\n\\n      hider.appendChild(labelEl);\\n      hider.appendChild(bullet);\\n      item.appendChild(hider);\\n      pagerInner.appendChild(item);\\n    });\\n    pager.appendChild(pagerInner);\\n    document.body.appendChild(pager);\\n\\n    var pagerItems = Array.prototype.slice.call(pager.querySelectorAll(\\\".ry-card-pager\\\"));\\n\\n    \/* L apertura della palina segue la lunghezza del titoletto piu\\n       lungo. Il testo ruotato e ancorato in basso: senza un cuscino\\n       sopra, se il font finale rende il testo anche solo qualche px\\n       piu largo della misura iniziale, la parte alta viene tagliata\\n       dall overflow. Quindi: margine di misura largo, 6px d aria\\n       sopra il testo, e rimisura a font e pagina caricati. *\/\\n    function applyPagerMetrics() {\\n      \/* misura su cloni fuori schermo appesi a body: il pager puo\\n         essere display none (viewport stretto al load, CSS in\\n         ritardo) e li offsetWidth darebbe 0 -> box troppo piccolo\\n         -> testo ruotato tagliato in alto *\/\\n      var contenitore = document.createElement(\\\"div\\\");\\n      contenitore.style.position = \\\"absolute\\\";\\n      contenitore.style.left = \\\"-9999px\\\";\\n      contenitore.style.top = \\\"0\\\";\\n      contenitore.style.visibility = \\\"hidden\\\";\\n      document.body.appendChild(contenitore);\\n      var larghezza = 0;\\n      var mezzaRiga = 8;\\n      pagerItems.forEach(function (item) {\\n        var clone = item.querySelector(\\\".ry-pager-label\\\").cloneNode(true);\\n        clone.style.position = \\\"static\\\";\\n        clone.style.transform = \\\"none\\\";\\n        clone.style.width = \\\"max-content\\\";\\n        contenitore.appendChild(clone);\\n        larghezza = Math.max(larghezza, clone.offsetWidth);\\n        mezzaRiga = Math.max(mezzaRiga, Math.round(clone.offsetHeight \/ 2));\\n      });\\n      contenitore.remove();\\n      if (larghezza === 0) { return; }   \/* niente misure valide: riprova dopo *\/\\n      larghezza = Math.max(Math.ceil(larghezza) + 10, 80);\\n      var cuscino = 6;\\n      pager.style.setProperty(\\\"--ry-pager-open\\\", (larghezza + cuscino + 20) + \\\"px\\\");\\n      pager.style.setProperty(\\\"--ry-label-width\\\", larghezza + \\\"px\\\");\\n      pager.style.setProperty(\\\"--ry-label-top\\\", (cuscino + larghezza \/ 2 - mezzaRiga) + \\\"px\\\");\\n      pager.style.setProperty(\\\"--ry-label-left\\\", (4 - larghezza \/ 2) + \\\"px\\\");\\n    }\\n    applyPagerMetrics();\\n    if (document.fonts) {\\n      if (document.fonts.ready) {\\n        document.fonts.ready.then(function () { applyPagerMetrics(); });\\n      }\\n    }\\n    \/* alcuni ottimizzatori WP caricano i CSS in ritardo: rimisura *\/\\n    setTimeout(applyPagerMetrics, 1000);\\n\\n    \/* ---- Posizione verticale: agganciata alla fascia delle card ----\\n       Sopra le card c e il titolo della sezione, anche lui sticky:\\n       il pager non va centrato sul viewport ma sulla fascia dove le\\n       card si bloccano. L offset lo leggiamo dall attributo uk-sticky\\n       delle colonne (es. \\\"offset: 18% + 20vh\\\"), cosi se lo cambi nel\\n       builder il pager si riallinea da solo. *\/\\n    function offsetDaSticky() {\\n      var trovato = null;\\n      stickies.forEach(function (s) {\\n        if (trovato !== null) { return; }\\n        if (!s) { return; }\\n        var attr = s.getAttribute(\\\"uk-sticky\\\");\\n        if (!attr) { attr = s.getAttribute(\\\"data-uk-sticky\\\"); }\\n        if (!attr) { return; }\\n        var indice = attr.indexOf(\\\"offset:\\\");\\n        if (indice === -1) { return; }\\n        var resto = attr.slice(indice + 7);\\n        var fine = resto.indexOf(\\\";\\\");\\n        if (fine !== -1) { resto = resto.slice(0, fine); }\\n        var somma = 0;\\n        var valido = false;\\n        resto.split(\\\"+\\\").forEach(function (parte) {\\n          parte = parte.trim();\\n          var numero = parseFloat(parte);\\n          if (isNaN(numero)) { return; }\\n          valido = true;\\n          if (parte.indexOf(\\\"%\\\") !== -1) {\\n            somma = somma + numero * window.innerHeight \/ 100;\\n          } else if (parte.indexOf(\\\"vh\\\") !== -1) {\\n            somma = somma + numero * window.innerHeight \/ 100;\\n          } else {\\n            somma = somma + numero;\\n          }\\n        });\\n        if (valido) { trovato = Math.round(somma); }\\n      });\\n      return trovato;\\n    }\\n\\n    function posizionaPager() {\\n      var offset = offsetDaSticky();\\n      if (offset === null) {\\n        \/* nessuno sticky del builder: ripiego sul viewport intero *\/\\n        pager.style.top = \\\"0px\\\";\\n        pager.style.height = \\\"100vh\\\";\\n        return;\\n      }\\n      var altezzaCard = 0;\\n      cards.forEach(function (card) {\\n        altezzaCard = Math.max(altezzaCard, card.offsetHeight);\\n      });\\n      var visibile = Math.min(altezzaCard, window.innerHeight - offset);\\n      if (visibile > 0) {\\n        pager.style.top = offset + \\\"px\\\";\\n        pager.style.height = visibile + \\\"px\\\";\\n      } else {\\n        pager.style.top = \\\"0px\\\";\\n        pager.style.height = \\\"100vh\\\";\\n      }\\n    }\\n    posizionaPager();\\n\\n    \/* ---- Video: pausa quando la card e coperta ---- *\/\\n    function safePlay(video) {\\n      video.muted = true;\\n      var attempt = video.play();\\n      if (attempt) {\\n        if (attempt.catch) { attempt.catch(function () {}); }\\n      }\\n    }\\n    function aggiornaVideo(indiceAttivo) {\\n      if (!OPZIONI.gestisciVideo) { return; }\\n      cards.forEach(function (card, i) {\\n        var videos = card.querySelectorAll(\\\"video\\\");\\n        if (i === indiceAttivo) { videos.forEach(safePlay); return; }\\n        if (i === indiceAttivo + 1) { videos.forEach(safePlay); return; }  \/* in arrivo *\/\\n        if (i > indiceAttivo) { return; }\\n        videos.forEach(function (v) { v.pause(); });   \/* coperta *\/\\n      });\\n    }\\n\\n    \/* ---- Stato: rilevazione geometrica, nessuna dipendenza ----\\n       Titoletto attivo: l ultima card il cui bordo alto ha superato\\n       la soglia (OPZIONI.soglia = 0.85: scatta appena la card nuova\\n       entra dal basso).\\n       Visibilita del pager: compare quando la PRIMA card raggiunge\\n       il suo punto di aggancio (l offset dello Sticky del builder,\\n       quindi sotto il titolo fisso) e scompare appena l ULTIMA card\\n       si stacca e inizia a salire verso la sezione successiva. *\/\\n    var ultimoAttivo = -1;\\n    var ultimaVisibilita = false;\\n\\n    function stato() {\\n      var soglia = window.innerHeight * OPZIONI.soglia;\\n      var attivo = -1;\\n      cards.forEach(function (card, i) {\\n        var top = card.getBoundingClientRect().top;\\n        if (soglia > top) { attivo = i; }\\n      });\\n      var ultima = cards[cards.length - 1].getBoundingClientRect();\\n      if (window.innerHeight * 0.5 > ultima.bottom) { attivo = -1; }\\n\\n      var visibile = false;\\n      if (attivo !== -1) {\\n        var offset = offsetDaSticky();\\n        if (offset === null) {\\n          visibile = true;   \/* senza Sticky del builder: segue attivo *\/\\n        } else {\\n          var primoTop = cards[0].getBoundingClientRect().top;\\n          \/* prima card arrivata all aggancio (40px di anticipo per\\n             fondersi col fade)... *\/\\n          if (offset + 40 > primoTop) {\\n            \/* ...e ultima card non ancora staccata verso l alto *\/\\n            if (ultima.top > offset - 10) { visibile = true; }\\n          }\\n        }\\n      }\\n\\n      if (attivo === ultimoAttivo) {\\n        if (visibile === ultimaVisibilita) { return; }\\n      }\\n      ultimoAttivo = attivo;\\n      ultimaVisibilita = visibile;\\n\\n      pagerItems.forEach(function (item, i) {\\n        item.classList.toggle(\\\"active\\\", i === attivo);\\n      });\\n      pager.classList.toggle(\\\"is-visible\\\", visibile);\\n      if (visibile) { aggiornaVideo(attivo); }\\n    }\\n\\n    \/* Lo scroll (throttled) guida tutto; resize e load ricalcolano\\n       anche la posizione verticale del pager *\/\\n    var attesa = false;\\n    function suScroll() {\\n      if (attesa) { return; }\\n      attesa = true;\\n      setTimeout(function () { attesa = false; stato(); }, 120);\\n    }\\n    function suResize() {\\n      applyPagerMetrics();\\n      posizionaPager();\\n      suScroll();\\n    }\\n    function suLoad() {\\n      applyPagerMetrics();\\n      posizionaPager();\\n      stato();\\n    }\\n    window.addEventListener(\\\"scroll\\\", suScroll, { passive: true });\\n    window.addEventListener(\\\"resize\\\", suResize, { passive: true });\\n    window.addEventListener(\\\"load\\\", suLoad);\\n    stato();\\n  }\\n\\n  if (document.readyState === \\\"loading\\\") {\\n    document.addEventListener(\\\"DOMContentLoaded\\\", init);\\n  } else {\\n    init();\\n  }\\n})();\\n<\/script>\\n\"},\"name\":\"ry-cards-pager \"}]}]}]}],\"version\":\"5.0.36\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>From seeds to ingredients Botanica ed estrazione, in un\u2019unica piattaforma industriale. [ Coltivazionein ambiente controllato ] [ Estrazione e tracciabilit\u00e0 ] Reytera integra sviluppo botanico, coltivazione in ambiente controllato e processi di trasformazione per creare ingredienti vegetali controllati, ripetibili e tracciabili, sviluppati su specifica insieme al cliente. Proponi una partnership 001 240 DAL SEME ALL&#8217;INGREDIENTE [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-409","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/pages\/409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":527,"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/pages\/409\/revisions"}],"predecessor-version":[{"id":3221,"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/pages\/409\/revisions\/3221"}],"wp:attachment":[{"href":"https:\/\/reytera.it\/wp-json\/wp\/v2\/media?parent=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}