/* =====================================================================
   Webing UI 1.2 · sistema (w-) e moduli (m-) per le pagine interne.
   Fonte: design-system/webing-style-guide.html. Si carica dopo webing-homepage.css e webing-ds12.css.
   ===================================================================== */

/* =====================================================================
   WEBING UI 1.2 · Fondazioni, firma Webing, card, elementi, movimento
   Blocco "SISTEMA" (prefisso w-) e "MODULI" (prefisso m-) da portare nel DS.
   Blocco "STYLE GUIDE" (prefisso sg-) serve solo a impaginare questa preview.
   ===================================================================== */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');}
@property --w-sweep{syntax:'<angle>';inherits:false;initial-value:0deg;}

/* ============================== SISTEMA ============================== */
:root{
  --w-ink:#0B0B0D;
  --w-white:#FFFFFF;
  --w-pink:#FD24BF;
  --w-pink-dark:#D40F9C;
  /* Il capo blu del gradiente Webing, come colore pieno: e il riempimento che sale
     sul pulsante di conversione. Prima saliva Ink, e su fondo Ink il pulsante spariva. */
  --w-blue-deep:#1447BF;
  --w-indigo:#3E46C9;
  --w-activation:#184ECA;
  --w-blue:#98C4FF;
  --w-lilac:#EEE1F7;
  --w-periwinkle:#DBDFF8;
  --w-sky:#EDF5FF;
  --w-mist:#EEF0F6;
  --w-gray:#6B6F76;
  --w-line:rgba(11,11,13,.10);
  /* Due gradienti: Radiant Light per le sezioni alternate al bianco, Radiant pieno per i momenti di marca */
  --w-radiant-light:linear-gradient(135deg,#EDF5FF 0%,#FFEFF9 100%);
  --w-radiant:linear-gradient(135deg,#F501CA 0%,#1447BF 100%);
  --w-radiant-alt:linear-gradient(135deg,#EFE1F7 0%,#C8DEF9 100%);

  /* Gradiente Webing: un solo gradiente per sezioni, testi speciali, anello e vincita */
  --w-stroke:linear-gradient(100deg,#F501CA 0%,#1447BF 100%);
  --w-stroke-ring:conic-gradient(from 225deg,#F501CA,#1447BF 50%,#F501CA);

  --w-sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --w-serif:'Helvetica Neue',Helvetica,Arial,sans-serif;

  --w-fs-display:clamp(40px,4.8vw,68px);
  --w-fs-h1:clamp(36px,4.1vw,58px);
  --w-fs-h1-compact:clamp(32px,3.3vw,46px);
  --w-fs-h2:clamp(30px,3.6vw,52px);
  --w-fs-h3:clamp(26px,2.4vw,36px);
  --w-fs-h4:clamp(20px,1.6vw,24px);
  --w-fs-kpi:clamp(64px,7vw,112px);
  --w-fs-lead:clamp(19px,1.55vw,22px);
  --w-fs-body:clamp(17px,1.25vw,18px);
  --w-fs-body-s:16px;

  --w-maxw:1380px;
  --w-page-pad:26px; /* stesso margine laterale delle sezioni della homepage */
  /* Rientro dei testi nelle hero allineate a sinistra: parte dove parte il logo nell'header */
  --w-hero-inset:calc(clamp(48px,6.875vw,110px) + 1px);
  --w-section-pad:clamp(72px,7vw,112px);
  --w-heading-gap:clamp(36px,3.6vw,52px);
  --w-gap:clamp(14px,1.7vw,24px);

  --w-section-radius:clamp(32px,4.5vw,72px);
  --w-card-radius:32px;
  --w-inner-radius:20px;
  --w-control-radius:14px;
  --w-card-pad:clamp(26px,3.2vw,48px);
  --w-card-shadow:0 1px 2px rgba(11,11,13,.04),0 22px 65px rgba(11,11,13,.07);
  --w-media-shadow:0 30px 70px rgba(3,5,16,.26);

  /* Firma Webing: la coda del fumetto è l'angolo in basso a sinistra */
  --w-tail:8px;
  --w-tail-s:4px;

  --w-ease:cubic-bezier(.16,1,.3,1);
  --w-ease-reel:cubic-bezier(.76,0,.24,1);
}
@media (max-width:1080px){ :root{ --w-hero-inset:39px; } }
@media (max-width:760px){ :root{ --w-card-radius:24px; --w-inner-radius:16px; } }
html.sig-off{ --w-tail:var(--w-card-radius); --w-tail-s:var(--w-control-radius); }


/* ---------- Tipografia ---------- */
.w-display,.w-h1,.w-h1-compact,.w-h2,.w-h3,.w-h4,.w-kpi{font-family:var(--w-sans);color:inherit;text-wrap:balance;}
.w-display{font-size:var(--w-fs-display);font-weight:800;line-height:1;letter-spacing:-.025em;}
.w-h1{font-size:var(--w-fs-h1);font-weight:800;line-height:1.04;letter-spacing:-.02em;}
.w-h1-compact{font-size:var(--w-fs-h1-compact);font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.w-h2{font-size:var(--w-fs-h2);font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.w-h3{font-size:var(--w-fs-h3);font-weight:800;line-height:1.05;letter-spacing:-.03em;}
.w-h4{font-size:var(--w-fs-h4);font-weight:700;line-height:1.18;letter-spacing:-.01em;}
.w-kpi{font-size:var(--w-fs-kpi);font-weight:800;line-height:.92;letter-spacing:-.06em;}
.w-lead{font-family:var(--w-serif);font-size:var(--w-fs-lead);font-weight:300;line-height:1.4;color:#000;max-width:640px;}
.w-body{font-family:var(--w-serif);font-size:var(--w-fs-body);font-weight:300;line-height:1.55;color:#000;max-width:68ch;}
.w-body-s{font-family:var(--w-serif);font-size:var(--w-fs-body-s);font-weight:400;line-height:1.45;color:#000;}
.w-kicker{font-family:var(--w-sans);font-size:13px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--w-pink);}
.w-label{font-family:var(--w-sans);font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,13,.62);}
.w-meta{font-family:var(--w-sans);font-size:13px;font-weight:600;line-height:1.3;color:var(--w-gray);}
.is-dark .w-lead,.is-dark .w-body,.is-dark .w-body-s{color:rgba(255,255,255,.9);}
.is-dark .w-kicker{color:rgba(255,255,255,.72);}
.is-dark .w-label,.is-dark .w-meta{color:rgba(255,255,255,.62);}

/* Credenziale: un badge di qualifica (Meta Business Partners, ISO, ManyChat) con accanto la frase che spiega cosa vale.
   Il badge e' l'elemento qualificante, quindi ha spazio suo e clear space: non si incolla al testo come un'icona.
   Plaque con la coda Webing, filetto tra badge e frase. Funziona su card Ink (.is-dark) e su fondi chiari. */
.w-credential{display:flex;align-items:center;gap:clamp(18px,1.9vw,26px);margin-top:clamp(28px,3vw,38px);padding:clamp(18px,1.8vw,22px) clamp(20px,2vw,26px);border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail-s);background:rgba(11,11,13,.045);}
.w-credential__logo{height:clamp(38px,3.4vw,48px);width:auto;flex-shrink:0;}
.w-credential__text{margin:0;flex:1 1 auto;padding-left:clamp(18px,1.9vw,26px);border-left:1px solid rgba(11,11,13,.14);font-family:var(--w-serif);font-size:15px;font-weight:400;line-height:1.45;color:var(--w-gray);text-wrap:balance;}
.w-credential + .w-actions{margin-top:clamp(26px,2.6vw,34px);}

/* ---------- Rimando ---------- */
/* Una riga che vale per tutto il blocco sopra e manda da un'altra parte:
   "questa meccanica si combina con X, la pagina e' quella". Prima era una
   riga di testo grigio attaccata sotto le card (.p-note), che si legge
   come una didascalia e quindi non si legge. Qui diventa un oggetto:
   fondo suo, coda Webing, testo in Ink alla misura del corpo piccolo, e
   l'Invio separato da un filetto, come nella Credenziale.
   Non e' un avviso e non e' una nota legale: se il contenuto non porta
   da nessuna parte, non e' un Rimando. */
/* Bianco con filetto e ombra, non un fondo grigio: il Rimando sta quasi
   sempre su Radiant Light, dove un Mist non si stacca e si legge come una
   nota di servizio. Cosi' invece e' un oggetto posato sopra la sezione. */
.w-rimando{display:flex;align-items:center;gap:clamp(18px,2vw,28px);flex-wrap:wrap;margin-top:clamp(28px,3vw,40px);padding:clamp(18px,1.9vw,24px) clamp(22px,2.2vw,30px);border:1px solid var(--w-line);border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail-s);background:#fff;box-shadow:var(--w-card-shadow);}
.w-rimando__text{margin:0;flex:1 1 320px;min-width:0;font-family:var(--w-serif);font-size:var(--w-fs-body-s);line-height:1.5;color:var(--w-ink);text-wrap:pretty;}
.w-rimando__go{flex:0 0 auto;display:flex;align-items:center;padding-left:clamp(20px,2.2vw,30px);border-left:1px solid rgba(11,11,13,.12);}
.w-rimando__go .w-send{margin:0;}
/* Quando il rimando deve pesare quanto una CTA: Ink pieno. Uno per pagina,
   altrimenti diventa rumore. Va accompagnato da .is-dark, che porta l'Invio
   e i testi nella versione chiara. */
.w-rimando--ink{border-color:transparent;background:var(--w-ink);color:#fff;box-shadow:none;}
.w-rimando--ink .w-rimando__text{color:rgba(255,255,255,.9);}
.w-rimando--ink .w-rimando__go{border-left-color:rgba(255,255,255,.22);}
@media (max-width:760px){
  .w-rimando{align-items:flex-start;gap:14px;}
  .w-rimando__go{padding-left:0;border-left:0;}
}
.is-dark .w-credential,.w-on-radiant .w-credential{background:rgba(255,255,255,.07);}
.is-dark .w-credential__text,.w-on-radiant .w-credential__text{border-left-color:rgba(255,255,255,.2);color:rgba(255,255,255,.78);}
@media (max-width:640px){
  .w-credential{flex-direction:column;align-items:flex-start;gap:16px;}
  .w-credential__text{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid rgba(11,11,13,.14);width:100%;}
  .is-dark .w-credential__text,.w-on-radiant .w-credential__text{border-top-color:rgba(255,255,255,.2);}
}
/* Su Radiant il testo è sempre bianco e il Pink non si usa: il fondo lo contiene già */
.w-on-radiant{color:#fff;}
.w-on-radiant .w-kicker{color:#fff;}
.w-on-radiant .w-lead,.w-on-radiant .w-body,.w-on-radiant .w-body-s{color:#fff;font-weight:400;}
/* Il gradiente viene dipinto solo dentro la scatola dell'elemento: con
   line-height 1 la coda della y finiva fuori e veniva tagliata. Il padding
   allarga l'area di disegno, il margine negativo in orizzontale evita che il
   testo si sposti. Verticalmente su un inline il padding non cambia la riga. 14/10. */
.w-stroke-text{background:var(--w-stroke);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.14em .06em .22em;margin:0 -.06em;}

/* ---------- Azioni ---------- */
.w-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 24px;border:0;border-radius:var(--w-control-radius) var(--w-control-radius) var(--w-control-radius) var(--w-tail-s);font:700 15px/1 var(--w-sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .35s var(--w-ease),box-shadow .35s var(--w-ease),border-radius .4s var(--w-ease);}
.w-btn::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--w-ease);}
.w-btn:hover::before{transform:translateY(0);}
.w-btn:focus{outline:0;}
.w-btn:focus-visible,.w-link:focus-visible,.w-send:focus-visible,a.w-card:focus-visible,a.w-case:focus-visible{outline:2px solid var(--w-pink);outline-offset:4px;}
.w-btn--primary{background:var(--w-pink);color:#fff;}
.w-btn--primary::before{background:var(--w-blue-deep);}
.w-btn--dark{background:var(--w-ink);color:#fff;}
.w-btn--dark::before{background:var(--w-stroke);}
.w-btn--light{background:#fff;color:var(--w-ink);}
.w-btn--light::before{background:var(--w-stroke);}
.w-btn--light:hover{color:#fff;}
.w-btn--ghost{background:transparent;color:var(--w-ink);box-shadow:inset 0 0 0 1.5px var(--w-ink);}
.w-btn--ghost::before{background:var(--w-ink);}
.w-btn--ghost:hover{color:#fff;}
.w-on-radiant .w-btn--light::before{background:var(--w-ink);}
.w-btn--ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff;}
.w-btn--ghost-light::before{background:#fff;}
.w-btn--ghost-light:hover{color:var(--w-ink);}
.w-arrow{display:inline-block;text-decoration:none;transition:transform .45s var(--w-ease);}
.w-btn:hover .w-arrow,.w-link:hover .w-arrow,a.w-card:hover .w-arrow,a.w-case:hover .w-arrow{transform:translate(3px,-3px);}

/* Link: la sottolineatura cresce solo sotto il testo, la freccia sale in diagonale */
.w-link{display:inline-flex;align-items:center;gap:8px;font:700 15px/1.2 var(--w-sans);text-decoration:none;color:inherit;}
.w-link__text{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat;transition:background-size .5s var(--w-ease);}
.w-link:hover .w-link__text,a.w-card:hover .w-link__text,a.w-case:hover .w-link__text{background-size:100% 1.5px;}
.w-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;}

/* Invio: il fumetto nero con la freccia si allarga e ingloba il testo */
.w-send{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:52px;padding-right:22px;font:700 15px/1 var(--w-sans);letter-spacing:-.01em;color:var(--w-ink);text-decoration:none;white-space:nowrap;}
.w-send::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:52px;border-radius:26px 26px 26px var(--w-tail-s);background:var(--w-ink);transition:width .7s var(--w-ease),background-color .3s;}
.w-send__icon{display:grid;place-items:center;width:52px;height:52px;margin-right:14px;color:#fff;font-size:17px;}
.w-send__label{transition:color .35s var(--w-ease) .08s;}
.w-send--pink::before{background:var(--w-pink);}
.w-send:hover::before,a.w-card:hover .w-send::before{width:100%;}
.w-send:hover .w-send__label,a.w-card:hover .w-send__label{color:#fff;}
.w-send:hover .w-arrow,a.w-card:hover .w-send .w-arrow{transform:translate(3px,-3px);}
.is-dark .w-send{color:#fff;}
.is-dark .w-send::before{background:#fff;}
.is-dark .w-send__icon{color:var(--w-ink);}
.is-dark .w-send:hover .w-send__label{color:var(--w-ink);}

/* ---------- Card: base ---------- */
.w-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:var(--w-card-pad);border:1px solid var(--w-line);border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);background:var(--w-white);box-shadow:var(--w-card-shadow);color:var(--w-ink);text-decoration:none;transition:border-radius .4s var(--w-ease);}
.w-card--blue,.w-card--lilac,.w-card--periwinkle,.w-card--ink{border-color:transparent;box-shadow:none;}
.w-card--blue{background:var(--w-blue);}
.w-card--lilac{background:var(--w-lilac);}
.w-card--periwinkle{background:var(--w-periwinkle);}
.w-card--ink{background:var(--w-ink);color:#fff;}
.w-card__label{margin-bottom:clamp(28px,3vw,44px);}
.w-card__title{min-height:calc(2em * 1.18);}
.w-card__text{margin-top:14px;}
.w-card__cta{margin-top:auto;padding-top:clamp(26px,2.6vw,36px);}

/* Anello Webing: al passaggio il gradiente Webing disegna il bordo partendo dalla coda */
.w-ring::after{content:"";position:absolute;z-index:5;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:var(--w-stroke-ring);
  -webkit-mask:conic-gradient(from 225deg,#000 var(--w-sweep),transparent 0),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in,xor,source-over;
  mask:conic-gradient(from 225deg,#000 var(--w-sweep),transparent 0),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:intersect,exclude,add;
  transition:--w-sweep 1s var(--w-ease);}
.w-ring:hover::after,.w-ring:focus-visible::after{--w-sweep:360deg;}
html.sig-off .w-ring::after{display:none;}
/* Su Radiant e su Ink l'anello è troppo: resta solo su fondi chiari */
.w-on-radiant .w-ring::after,.is-dark .w-ring::after,.sg-demo--radiant .w-ring::after,.sg-demo--ink .w-ring::after{display:none;}

.w-grid{display:grid;gap:var(--w-gap);}
.w-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.w-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.w-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ---------- Famiglia 1 · Info ---------- */
.w-info{min-height:clamp(320px,27vw,400px);}
/* 4 card in riga: la min-height da 2-up lascia meta' card vuota. Si riscala sul numero di colonne. */
.w-grid--4 > .w-info{min-height:clamp(186px,14vw,214px);}
.w-grid--4 > .w-info .w-card__label{margin-bottom:clamp(14px,1.4vw,20px);}
.w-info__step{display:grid;place-items:center;width:46px;height:46px;margin-bottom:clamp(40px,5vw,72px);border-radius:23px 23px 23px var(--w-tail-s);background:var(--w-ink);color:#fff;font:800 14px/1 var(--w-sans);}
.w-info--article{padding:0;min-height:0;}
.w-info--article .w-info__media{aspect-ratio:16/10;overflow:hidden;background:var(--w-lilac);}
.w-info--article .w-info__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--w-ease);}
.w-info--article:hover .w-info__media img{transform:scale(1.04);}
.w-info--article .w-info__body{display:flex;flex:1;flex-direction:column;padding:clamp(22px,2.4vw,32px);}
.w-info--article .w-meta{margin-bottom:12px;}
/* Anchor lungo dentro una card con immagine: il fumetto va a capo invece di uscire dalla card */
.w-info--article .w-send{height:auto;min-height:52px;padding-right:20px;white-space:normal;}
.w-info--article .w-send__label{line-height:1.25;}
.w-info--choice{min-height:clamp(340px,28vw,420px);}
/* Il titolo della card scelta usa tutta la larghezza disponibile: con il cap a 16ch
   andava a capo molto prima del bordo e la card sembrava mezza vuota (Andrea, 21/9).
   Il testo sotto sale alla misura del corpo normale: a 16 px fissi era piu piccolo
   del corpo del resto del sito dentro una card alta 340-420 px. */
.w-info--choice .w-body-s{font-size:var(--w-fs-body);}
/* Le due card del bivio allineano tra loro etichetta, titolo, testo e CTA: il testo
   sotto il titolo parte sempre alla stessa altezza anche quando un titolo sta su una
   riga e l'altro su due (Andrea, 21/9). Subgrid invece di un min-height a due righe,
   cosi si adatta da solo se il copy cresce a tre righe o se cambia il breakpoint.
   Sotto i 760 px le card si impilano e non c'e' niente da allineare. */
@supports (grid-template-rows:subgrid){
  @media (min-width:761px){
    .w-grid:has(> .w-info--choice){grid-template-rows:auto auto auto 1fr;row-gap:0;}
    .w-info--choice{display:grid;grid-template-rows:subgrid;grid-row:span 4;}
  }
}

/* ---------- Famiglia 2 · Split ---------- */
.w-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--w-gap);align-items:stretch;}
.w-split__copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(8px,4vw,64px);}
.w-split__copy .w-lead{margin-top:20px;}
.w-split__copy .w-actions{margin-top:clamp(28px,3vw,40px);}
.w-split__panel{position:relative;display:grid;place-items:center;min-height:clamp(380px,40vw,600px);overflow:hidden;border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);perspective:1200px;}
.w-split__panel--lilac{background:var(--w-lilac);}
.w-split__panel--periwinkle{background:var(--w-periwinkle);}
.w-split__panel--white{background:#fff;box-shadow:var(--w-card-shadow);}
.w-split__creative{width:min(72%,440px);aspect-ratio:4/5;overflow:hidden;border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail-s);box-shadow:var(--w-media-shadow);transform:rotate(-3deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--w-ease);will-change:transform;}
.w-split__creative img{width:100%;height:100%;object-fit:cover;}
/* Video dentro la creative di una split: il poster e' una img vera sotto, il video
   sale in dissolvenza quando parte. Era CSS di pagina su contest-tiktok, dall'11/10
   e' di sistema perche' lo usa anche /concorsi-con-acquisto/. */
.w-split__creative{position:relative;}
.w-split__creative video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--w-ease);}
.w-split__creative video.is-playing{opacity:1;}
/* Creative verticale in una split: la cornice prende il formato del media invece di
   ritagliarlo a 4:5. 11/10, caso Gabry Ponte su /concorsi-instant-win/. */
.w-split__creative--alta{width:min(58%,310px);aspect-ratio:600/1185;}
.w-split__creative--quadra{width:min(68%,400px);aspect-ratio:1/1;}
/* Carosello di case dentro una split (pagina Metodo, blocco Legal): la cornice e'
   la stessa delle creative singole, misura, rotazione e ombra comprese. Dentro ci
   sta la SS-CARD, che riempie la cornice. 11/10. */
.p-legal-case .w-case{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border-radius:inherit;padding:clamp(12px,1.2vw,16px);background:transparent;}
.w-split__creative--wide{width:92%;aspect-ratio:1200/685;border-radius:14px 14px 14px var(--w-tail-s);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.w-split--paired .w-card{min-height:clamp(340px,30vw,440px);justify-content:center;}
.w-split--paired .w-card .w-body{margin-top:22px;max-width:46ch;}
.w-split--paired .w-card .w-actions{margin-top:clamp(28px,3vw,40px);}
.w-split--paired .w-split__panel{min-height:0;}

/* Alternanza: stessa Split, lati scambiati. Serve quando in una pagina ce
   n'e' piu' di una, per non avere due creative sulla stessa colonna una
   sotto l'altra. Si scambia l'ordine, non il markup: il copy resta primo
   nel documento, quindi l'ordine di lettura e lo screen reader non
   cambiano. Vale anche sulla Coppia.
   Sotto i 760 px l'inversione resta: la creative va sopra al testo, come
   nella Fascia, cosi' l'alternanza si vede anche da telefono. */
.w-split--rev .w-split__panel{order:-1;}
/* anche l'inclinazione si specchia: con la creative a sinistra la stessa
   rotazione a -3 gradi la fa cadere verso il testo. Cosi' le due Split
   sembrano una coppia, non una copia. */
.w-split--rev .w-split__creative{transform:rotate(3deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.w-split--rev .w-split__creative--wide{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}

/* ---------- Famiglia 2c · Fascia ---------- */
/* Lo Split ridotto, per blocchi di marketing impilati uno sotto l'altro:
   le idee di contest, le occasioni dell'anno. Niente bordo e niente ombra,
   cosi' legge come una sezione e non come una card, e nove blocchi di fila
   non diventano un muro di articoli.
   Vincolo non derogabile: la creative e' sempre intera, mai tagliata. */
.w-fascia{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);align-items:stretch;gap:0;min-width:0;overflow:hidden;border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);background:var(--w-radiant-light);color:var(--w-ink);text-decoration:none;--w-fascia-pad:clamp(26px,2.8vw,44px);}
.w-fascia + .w-fascia{margin-top:var(--w-gap);}
/* l'altezza la detta la locandina: il suo bordo alto e' la riga del periodo,
   il suo bordo basso e' la riga dell'Invio */
.w-fascia__panel{order:2;position:relative;display:grid;place-items:center;align-self:stretch;padding:var(--w-fascia-pad);}
.w-fascia__art{position:relative;margin:0;height:clamp(258px,26vw,346px);aspect-ratio:4/5;overflow:hidden;border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail-s);background:#fff;box-shadow:0 30px 60px rgba(41,38,93,.22);transform:rotate(3deg);transition:transform .8s var(--w-ease);}
.w-fascia:hover .w-fascia__art{transform:rotate(0deg) scale(1.02);}
/* contain e non cover: la creative non si taglia mai */
.w-fascia__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;}
.w-fascia__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:var(--w-fascia-pad) 0 var(--w-fascia-pad) clamp(30px,3.2vw,52px);}
.w-fascia__copy .w-h3{margin:0;letter-spacing:-.02em;}
.w-fascia__copy .w-body{margin:0;color:var(--w-gray);}
.w-fascia__copy .w-send{margin-top:auto;}
/* il periodo: pastiglia bianca in alto a sinistra, sopra il titolo */
.w-fascia__when{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px 9px 9px var(--w-tail-s);background:#fff;box-shadow:0 4px 12px rgba(11,11,13,.07);font:700 10px/1.4 var(--w-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--w-ink);}
.w-fascia__when i{width:5px;height:5px;border-radius:50%;background:var(--w-pink);}
@media (max-width:860px){
  /* minmax(0,1fr) e non 1fr: l'Invio e' nowrap come in tutto il sistema,
     e con 1fr il suo min-content allargherebbe il blocco oltre il contenitore */
  .w-fascia{grid-template-columns:minmax(0,1fr);}
  .w-fascia__panel{order:0;}
  .w-fascia__panel,.w-fascia__copy{padding:clamp(22px,4vw,30px);}
}

/* ---------- Famiglia 3 · Proof ---------- */
.w-kpi-card{min-height:clamp(320px,28vw,430px);}
.w-kpi-card .w-h4{margin-top:auto;padding-top:28px;}
.w-kpi-card .w-body-s{margin-top:10px;max-width:34ch;}
/* Titolo e testo allineati fra le card della riga, che il titolo stia su una
   riga o su due. Prima il titolo era spinto in basso con margin-top:auto:
   un titolo su due righe cresceva verso l'alto e partiva piu' su degli altri.
   Come nella card Bivio: subgrid sulle righe della griglia, non altezze
   minime calcolate a due righe, che si rompono appena il copy cresce.
   La prima riga e' elastica e tiene il numero in alto; le altre due sono
   alte quanto il titolo e il testo piu' alti della riga. */
@supports (grid-template-rows:subgrid){
  @media (min-width:761px){
    /* il pavimento della prima riga tiene alta la card: sotto subgrid il
       min-height della card non fa piu' da altezza minima, la fanno le righe */
    .w-grid:has(> .w-kpi-card){grid-auto-rows:minmax(clamp(155px,15.3vw,220px),1fr) auto auto;row-gap:0;}
    .w-kpi-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;}
    .w-kpi-card .w-kpi{align-self:start;}
    .w-kpi-card .w-h4{margin-top:0;}
  }
}
/* Contatore a rulli.
   La finestra di ogni cifra e' piu' alta di 1em: le cifre tonde (0, 3, 5, 6, 8)
   sfondano di poco la linea di base e con la finestra esatta a 1em venivano
   tagliate sotto. L'altezza sta in --odo-h, che serve anche allo scorrimento:
   se si cambia una, si sposta anche l'altra. */
.w-odo{display:inline-flex;align-items:flex-start;--odo-h:1.16em;}
.w-odo__strip span{text-align:left;}
.w-odo__col{display:inline-block;height:var(--odo-h);overflow:hidden;}
/* La finestra taglia solo in verticale. In orizzontale no: la colonna e'
   larga quanto la cifra misurata CON il letter-spacing, che qui e' negativo
   (-0,06em), quindi piu' stretta dell'ingombro reale del glifo. Con
   overflow:hidden le cifre tonde come 5 e 8 perdevano un filo sul lato
   destro. Il clip-path con inset negativo lascia respirare i fianchi e
   taglia solo sopra e sotto, che e' l'unica cosa che serve ai rulli. */
@supports (clip-path:inset(0 -1px)){
  .w-odo__col{overflow:visible;clip-path:inset(0 -0.5em);}
}
.w-odo__strip{display:flex;flex-direction:column;transition:transform 1.8s var(--w-ease);}
.w-odo__strip span,.w-odo > span{display:block;height:var(--odo-h);line-height:var(--odo-h);}
.is-in .w-odo__strip{transform:translateY(calc(var(--d) * -1 * var(--odo-h)));}
.w-case{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;min-width:0;overflow:hidden;padding:clamp(16px,1.8vw,24px);border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);background:#17171a;color:#fff;text-decoration:none;}
.w-case__media{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--w-ease);}
.w-case::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);}
.w-case:hover .w-case__media{transform:scale(1.05);}
.w-case__top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.w-case__kpi{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:17px 17px 17px var(--w-tail-s);background:var(--w-pink);font:800 13px/1 var(--w-sans);}
.w-case__logo{display:grid;place-items:center;height:40px;min-width:88px;padding:0 14px;border-radius:12px;background:#fff;color:var(--w-ink);font:800 12px/1 var(--w-sans);letter-spacing:.06em;}
.w-case__logo img{max-height:18px;width:auto;}
.w-case__copy{display:grid;gap:12px;padding:16px 18px;border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail-s);background:rgba(11,11,13,.62);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);transition:transform .7s var(--w-ease);}
.w-case:hover .w-case__copy{transform:translateY(-4px);}
.w-case__copy p{font:700 clamp(17px,1.35vw,20px)/1.28 var(--w-sans);letter-spacing:-.01em;max-width:30ch;}
.w-case__copy .w-link{font-size:14px;}
/* SS-CARD con didascalia esterna (8 ottobre): il creative resta interamente visibile.
   Il logo cliente non entra piu' nella card: nel 99% dei casi e' gia' dentro al creative,
   e scritto per esteso si legge anche dove il creative e' uno screen recording. */
.w-case-item{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;margin:0;}
/* Card quadrata 1:1, per le creative in formato post. Usata nell'explainer al posto del telefono
   quando la campagna non ha creative verticali. */
.w-case--quadro{aspect-ratio:1/1;}
.m-explainer__card{width:100%;max-width:340px;justify-self:center;}
.m-explainer__card .w-case{border:1px solid var(--w-line);box-shadow:var(--w-card-shadow);background:var(--w-white);}
.m-explainer__card .w-case__label{margin-top:12px;}
/* Una sola case in griglia (pagine di settore con un unico cliente): la card non resta
   schiacciata a sinistra su tre colonne, si centra. 11/10. */
.w-grid:has(> .w-case-item:only-child){grid-template-columns:minmax(0,clamp(260px,26vw,340px));justify-content:center;}
.w-case-item .w-case{width:100%;justify-content:flex-start;transition:transform .5s var(--w-ease),box-shadow .5s var(--w-ease);}
.w-case-item:is(:hover,:focus-within) .w-case{transform:translateY(-5px);box-shadow:0 26px 54px -20px rgba(11,11,13,.45);}
/* niente velature sul creative: l'unico elemento sopra e' la barra in basso */
.w-case-item .w-case::before{display:none;}
/* piu' creative per la stessa case: si alternano in dissolvenza */
.w-case__slide{position:absolute;z-index:-2;inset:0;opacity:0;transition:opacity .8s var(--w-ease);}
.w-case__slide.is-on{opacity:1;}
.w-case__slide .w-case__media{z-index:auto;}
/* Il poster e' un'immagine vera sotto al video, non l'attributo poster: dopo un pause
   l'attributo non torna piu' e l'elemento resta su un frame vuoto, che e' il bianco
   che si vedeva uscendo dalla card. Il video si mostra solo mentre gira davvero. */
.w-case__video{opacity:0;transition:opacity .25s var(--w-ease);}
.w-case__slide.is-playing .w-case__video{opacity:1;}
/* Il telaio ha le proporzioni vere del media. A riposo e' ingrandito quel tanto che
   basta a riempire la cornice 4:5; all'hover torna a scala naturale e il creative
   si vede intero. Il fattore lo calcola il JS dal file. */
.w-case__telaio{position:absolute;inset:0;border-radius:0;overflow:hidden;transition:transform .55s var(--w-ease),border-radius .55s var(--w-ease),box-shadow .55s var(--w-ease);}
.w-case__slide.ha-intero .w-case__telaio{inset:auto;left:50%;top:50%;translate:-50% -50%;width:var(--w-case-w,100%);height:var(--w-case-h,100%);transform:scale(var(--w-case-k,1));}
.w-case:is(:hover,:focus-visible) .w-case__slide.ha-intero .w-case__telaio{transform:scale(.9);}
/* Eccezione: creativa ancorata in alto. A riposo la card taglia sopra e sotto in
   parti uguali; quando il logo del brand sta nella prima fascia dell'immagine
   sparisce. Con data-ancora="alto" il bordo superiore resta fermo e il taglio
   va tutto sotto. All'hover la card torna a centrare e mostra la creativa intera,
   quindi niente si perde davvero. Si usa solo dove serve, non e' il default. */
.w-case[data-ancora="alto"] .w-case__slide.ha-intero .w-case__telaio{
  top:0;translate:-50% 0;transform-origin:top center;
  transition:transform .55s var(--w-ease),translate .55s var(--w-ease),top .55s var(--w-ease),border-radius .55s var(--w-ease),box-shadow .55s var(--w-ease);}
.w-case[data-ancora="alto"]:is(:hover,:focus-visible) .w-case__slide.ha-intero .w-case__telaio{
  top:50%;translate:-50% -50%;transform-origin:center;}
/* sfondo sfocato ricavato dal creative stesso: riempie la cornice quando il media rientra */
.w-case__sfondo{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--w-ease);}
.w-case__sfondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);filter:blur(26px) saturate(118%) brightness(.86);}
.w-case:is(:hover,:focus-visible) .w-case__slide.ha-intero .w-case__sfondo{opacity:1;}
/* quando il media si apre prende gli angoli della card che lo contiene */
.w-case:is(:hover,:focus-visible) .w-case__slide.ha-intero .w-case__telaio{border-radius:clamp(12px,1.7vw,20px);box-shadow:0 16px 36px -16px rgba(0,0,0,.5);}
/* sui media girati in verticale da telefono il telaio diventa un telefono */
.w-case:is(:hover,:focus-visible) .w-case__slide.ha-telefono .w-case__telaio{border-radius:clamp(16px,2.4vw,28px);box-shadow:0 0 0 1.5px rgba(255,255,255,.88),0 0 0 7px rgba(11,11,13,.9),0 20px 44px -14px rgba(0,0,0,.6);}
.w-case__isola{position:absolute;left:50%;top:8px;translate:-50% 0;width:30%;max-width:92px;height:9px;border-radius:9px;background:rgba(11,11,13,.92);opacity:0;transition:opacity .35s var(--w-ease) .12s;}
.w-case:is(:hover,:focus-visible) .w-case__slide.ha-telefono .w-case__isola{opacity:1;}
/* un solo gesto all'hover: il creative che si apre, non lo zoom */
.w-case-item:hover .w-case__media{transform:none;}
@media (prefers-reduced-motion:reduce){ .w-case__telaio,.w-case__sfondo{transition:none;} }
/* badge play sul creative video, sparisce mentre il video gira */
.w-case__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(11,11,13,.46);box-shadow:0 2px 14px rgba(0,0,0,.18);backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);transition:opacity .35s var(--w-ease),transform .35s var(--w-ease);}
.w-case__play svg{width:15px;height:17px;margin-left:3px;fill:#fff;}
.w-case__slide.is-playing .w-case__play{opacity:0;transform:scale(.82);}
/* barrette alla Instagram Stories: una per creative, si riempiono a tempo */
.w-case__barre{display:flex;gap:4px;width:100%;filter:drop-shadow(0 1px 2px rgba(11,11,13,.32)) drop-shadow(0 0 2px rgba(11,11,13,.45));}
.w-case__barra{flex:1;overflow:hidden;height:2.5px;border-radius:2px;background:rgba(255,255,255,.42);}
.w-case__barra b{display:block;width:0;height:100%;border-radius:inherit;background:#fff;}
.w-case__barra.is-vista b{width:100%;}
.w-case__barra.is-corso b{animation:w-case-storia var(--w-case-durata,3600ms) linear forwards;}
@keyframes w-case-storia{from{width:0;}to{width:100%;}}
/* ferma mentre ci passi sopra o quando la card esce dallo schermo */
.w-case.is-ferma .w-case__barra.is-corso b{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .w-case__barra.is-corso b{animation:none;width:100%;} }
/* barra in basso: il dato a sinistra */
.w-case__bar{display:flex;align-items:center;gap:12px;margin-top:auto;}
.w-case-item .w-case__kpi{min-height:27px;padding:0 12px;border-radius:14px 14px 14px var(--w-tail-s);font:800 12px/1 var(--w-sans);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.16);}
.w-case__label{display:block;max-width:100%;min-width:0;margin:0;font:600 13px/1.35 var(--w-sans);color:var(--w-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.w-case__label b{font-weight:800;}
.is-dark .w-case__label,.w-on-radiant .w-case__label{color:#fff;}

/* ---------- Accordion ---------- */
.w-accordion{border-top:1px solid var(--w-line);}
.w-accordion details{border-bottom:1px solid var(--w-line);}
.w-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none;font:700 clamp(18px,1.4vw,21px)/1.3 var(--w-sans);letter-spacing:-.01em;}
.w-accordion summary::-webkit-details-marker{display:none;}
.w-accordion summary i{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--w-line);border-radius:18px 18px 18px var(--w-tail-s);transition:transform .5s var(--w-ease),background-color .3s,border-color .3s,color .3s;}
.w-accordion summary i::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);}
.w-accordion details[open] summary i{transform:rotate(180deg);background:var(--w-ink);border-color:var(--w-ink);color:#fff;border-radius:18px var(--w-tail-s) 18px 18px;}
.w-accordion summary:hover i{border-color:var(--w-ink);}
.w-accordion details > div{padding:0 64px 28px 0;}

/* ---------- Ingresso ---------- */
html.js [data-reveal]:not(.m-seq__passi) > *{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--w-ease) calc(var(--i,0) * 90ms),transform 1.2s var(--w-ease) calc(var(--i,0) * 90ms),filter .9s var(--w-ease) calc(var(--i,0) * 90ms);}
html.js [data-reveal]:not(.m-seq__passi).is-in > *{opacity:1;transform:none;filter:none;}

@media (max-width:1180px){ .w-grid--4{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:860px){ .w-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:1080px){ .w-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
  .w-grid--2,.w-grid--3,.w-grid--4,.w-split{grid-template-columns:1fr;}
  .w-split__copy{padding:8px 4px 20px;}
  .w-split__panel{min-height:360px;}
  .w-card__title{min-height:0;}
  .w-info,.w-info--choice{min-height:0;}
  .w-accordion details > div{padding-right:0;}
}

/* =========================== MODULI =========================== */

/* A · Hero bento */
.m-bento{position:relative;overflow:hidden;padding:clamp(56px,6vw,96px) var(--w-page-pad);border-radius:var(--w-section-radius);background:var(--w-radiant);}
.m-bento__copy{position:relative;z-index:2;max-width:920px;margin:0 auto;text-align:center;}
.m-bento__copy .w-kicker{margin-bottom:18px;}
.m-bento__copy .w-lead{margin:22px auto 0;}
.m-bento__actions{position:relative;z-index:2;margin-top:clamp(36px,3.6vw,52px);}
.m-bento__actions .w-actions{justify-content:center;}
.m-bento__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;align-items:end;gap:clamp(12px,1.5vw,22px);max-width:1240px;margin:clamp(44px,4.4vw,64px) auto 0;}
.m-bento__col{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,22px);min-width:0;}
/* le due colonne esterne scendono uguale: dal 9/10 i due lati dell'Onda si
   specchiano, quindi anche lo scalino deve essere lo stesso a destra e a sinistra */
.m-bento__col--1,.m-bento__col--5{padding-bottom:clamp(34px,4.4vw,72px);}
.m-tile{position:relative;overflow:hidden;color:var(--w-ink);border-radius:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) var(--w-tail);background:#fff;}
.m-tile--stat{padding:clamp(12px,1.1vw,16px);box-shadow:var(--w-card-shadow);}
.m-tile--stat .m-tile__kpi{display:block;padding:10px 6px 0;font:800 clamp(34px,3.3vw,50px)/1 var(--w-sans);letter-spacing:-.05em;}
.m-tile--stat .m-tile__label{display:block;height:calc(2 * 1.3em + 20px);padding:6px 6px 14px;font:600 clamp(12px,1vw,15px)/1.3 var(--w-sans);}
.m-tile--stat.is-bottom .m-tile__label{height:calc(2 * 1.3em + 10px);padding-bottom:4px;}
.m-tile--stat .m-reel{aspect-ratio:4/5;border-radius:clamp(14px,1.4vw,20px) clamp(14px,1.4vw,20px) clamp(14px,1.4vw,20px) var(--w-tail-s);}
.m-tile--media{aspect-ratio:3/5;box-shadow:var(--w-media-shadow);}
.m-tile--media .m-reel{position:absolute;inset:0;}
/* Una creative messa direttamente nella tile (img o picture, senza reel): va
   posizionata come fa il reel, altrimenti resta alla sua dimensione naturale e si
   deforma. La tile porta gia' il formato del media, quindi cover non taglia nulla. */
.m-tile--media > img,.m-tile--media > picture{position:absolute;inset:0;display:block;width:100%;height:100%;}
.m-tile--media > img,.m-tile--media > picture > img{width:100%;height:100%;object-fit:cover;display:block;}
.m-reel{position:relative;overflow:hidden;background:#111;}
/* Le cornici delle creative prendono il rapporto del media: lo scrive il JS come
   aspect-ratio, cosi' il media resta in cover e non viene tagliato ne' ridotto a fascia.
   La forma si prende dalla prima creative e non cambia piu': se cambiasse a ogni
   scambio del reel la pagina si allungherebbe e accorcerebbe mentre la si legge. */
/* la forma si fissa una volta sola, all'avvio: niente transizione, niente salti */

.m-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.14);filter:blur(10px);transition:clip-path 1.15s var(--w-ease-reel),transform 1.6s var(--w-ease),filter 1.1s var(--w-ease);}
.m-reel img.is-current{z-index:2;clip-path:inset(0 0 0 0);transform:scale(1);filter:blur(0);}
.m-reel img.is-out{z-index:1;clip-path:inset(0 0 0 0);transform:scale(1.06) translateY(-6%);filter:blur(3px) brightness(.55);transition:transform 1.2s var(--w-ease-reel),filter 1.2s var(--w-ease);}
.m-roll,.m-tile__kpi.m-roll,.m-tile__label.m-roll{display:grid;overflow:hidden;}
.m-roll__line{grid-area:1/1;display:block;}
.m-roll--chars .m-roll__line span{display:inline-block;transform:translateY(105%);opacity:0;filter:blur(4px);transition:transform .85s var(--w-ease),opacity .5s var(--w-ease),filter .7s var(--w-ease);}
.m-roll--chars .m-roll__line.is-current span{transform:none;opacity:1;filter:none;}
.m-roll--chars .m-roll__line.is-out span{transform:translateY(-105%);opacity:0;filter:blur(4px);}
.m-roll--line .m-roll__line{transform:translateY(40%);opacity:0;filter:blur(6px);transition:transform .8s var(--w-ease),opacity .6s var(--w-ease),filter .7s var(--w-ease);}
.m-roll--line .m-roll__line.is-current{transform:none;opacity:1;filter:none;transition-delay:.12s;}
.m-roll--line .m-roll__line.is-out{transform:translateY(-40%);opacity:0;filter:blur(6px);transition-delay:0s;}

.m-chat{display:flex;flex-direction:column;height:clamp(210px,19vw,250px);padding:12px;box-shadow:var(--w-card-shadow);}
.m-chat__head{display:flex;align-items:center;gap:9px;padding:4px 4px 10px;border-bottom:1px solid var(--w-line);font:700 12px/1.2 var(--w-sans);}
.m-chat__head img{width:28px;height:28px;padding:5px;border-radius:14px 14px 14px 3px;background:var(--w-ink);}
.m-chat__head small{display:block;font-weight:600;color:var(--w-gray);}
.m-chat__head b{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 10px/1 var(--w-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--w-pink-dark);}
.m-chat__head b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-pink);}
.m-chat__list{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding-top:10px;overflow:hidden;transition:opacity .5s var(--w-ease),filter .5s;}
.m-chat__list.is-clearing{opacity:0;filter:blur(6px);}

@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/sf-pro-display-regular.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sf-pro-display-bold.woff2') format('woff2');}
/* ===== MOD-H2 . chatbot con il look di Instagram (.m-igc) =========================
   Portato dal prototipo _prove/hero-smartphone.html, senza la scocca del telefono:
   qui vive dentro la card della hero e ne prende le misure. Le quote vengono dagli
   screenshot della chat vera, 402 punti di larghezza logica, e scalano con --u.
   Struttura e comportamenti, non gli asset di marca. */
.m-igc-box{container-type:inline-size;padding:0;overflow:hidden;}
/* La card della hero e' larga e bassa, non ha la forma di un telefono: la scala segue
   la larghezza ma con un tetto, altrimenti entrerebbe una bolla sola. */
.m-igc{--u:min(calc(100cqw / 402),.78px);
  --igf:'SF Pro Display',-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  height:100%;display:flex;flex-direction:column;font-family:var(--igf);background:#fff;color:#0C0F14;text-align:left;}
.m-igc__head{flex:0 0 auto;display:flex;align-items:center;gap:calc(var(--u) * 12);
  padding:calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 10);box-shadow:0 1px 0 rgba(11,11,13,.07);}
.m-igc__back{width:calc(var(--u) * 42);height:calc(var(--u) * 42);flex:0 0 auto;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u) * 1) #EFEFEF;}
.m-igc__back::after{content:"";width:calc(var(--u) * 11);height:calc(var(--u) * 11);border:solid #0C0F14;border-width:calc(var(--u) * 2.4) 0 0 calc(var(--u) * 2.4);transform:rotate(-45deg) translate(calc(var(--u) * 1),calc(var(--u) * 1));}
.m-igc__av{width:calc(var(--u) * 36);height:calc(var(--u) * 36);flex:0 0 auto;border-radius:50%;object-fit:cover;background:#EFEFEF;}
.m-igc__who{min-width:0;}
.m-igc__nome{display:flex;align-items:center;gap:calc(var(--u) * 5);margin:0;font:700 calc(var(--u) * 17)/1.2 var(--igf);letter-spacing:calc(var(--u) * -.2);color:#0C0F14;}
.m-igc__ver{width:calc(var(--u) * 17);height:calc(var(--u) * 17);flex:0 0 auto;}
.m-igc__sub{margin:calc(var(--u) * 2) 0 0;font:400 calc(var(--u) * 12.5)/1.25 var(--igf);color:#65676B;}
.m-igc__body{flex:1;min-height:0;overflow:hidden;position:relative;}
.m-igc__flow{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:calc(var(--u) * 10);
  padding:calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 12);}
.m-igc__r{display:flex;align-items:flex-end;gap:calc(var(--u) * 6);
  animation:igc-in .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes igc-in{from{opacity:0;transform:translateY(calc(var(--u) * 14)) scale(.96);}to{opacity:1;transform:none;}}
/* i puntini lasciano il posto alla bolla incrociandosi, senza salto */
.m-igc__r.is-esce{animation:igc-out .2s ease-in both;}
/* la bolla che si posa al posto dei puntini: entra lei, non la riga */
.m-igc__r.is-posa > div{animation:igc-in .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes igc-out{to{opacity:0;transform:translateY(calc(var(--u) * -4)) scale(.94);}}
/* fra una sequenza e l'altra la conversazione si dissolve invece di azzerarsi */
.m-igc__flow.is-chiude{opacity:0;filter:blur(calc(var(--u) * 5));transform:translateY(calc(var(--u) * -10));
  transition:opacity .6s var(--w-ease),filter .6s var(--w-ease),transform .6s var(--w-ease);}
.m-igc__r--bot{justify-content:flex-start;}
.m-igc__r--io{justify-content:flex-end;}
.m-igc__mini{width:calc(var(--u) * 28);height:calc(var(--u) * 28);flex:0 0 auto;border-radius:50%;object-fit:cover;background:#EFEFEF;visibility:hidden;}
.m-igc__r--bot:last-child .m-igc__mini{visibility:visible;}
.m-igc__bot{max-width:calc(var(--u) * 240);padding:calc(var(--u) * 11) calc(var(--u) * 12);border-radius:calc(var(--u) * 22);background:#F0F2F5;
  font:400 calc(var(--u) * 16)/calc(var(--u) * 21) var(--igf);color:#0C0F14;white-space:pre-line;}
.m-igc__io{max-width:calc(var(--u) * 260);padding:calc(var(--u) * 10) calc(var(--u) * 16);border-radius:calc(var(--u) * 22);background:#6C3CEE;
  font:400 calc(var(--u) * 16)/calc(var(--u) * 21) var(--igf);color:#fff;white-space:pre-line;word-break:break-word;}
/* H2b . il messaggio vocale nella chat. Serve a VOICEGASMIC: l'onda e' disegnata
   con barrette, la durata e' testo. Non c'e' audio, e' la figura del vocale. */
.m-igc__voc{display:flex;align-items:center;gap:calc(var(--u) * 9);
  padding:calc(var(--u) * 11) calc(var(--u) * 14);border-radius:calc(var(--u) * 22);}
.m-igc__voc--bot{background:#F0F2F5;color:#0C0F14;border-bottom-left-radius:calc(var(--u) * 6);}
.m-igc__voc--io{background:#6C3CEE;color:#fff;border-bottom-right-radius:calc(var(--u) * 6);}
.m-igc__voc-play{flex:0 0 auto;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;
  display:grid;place-items:center;background:currentColor;}
.m-igc__voc-play::after{content:"";width:0;height:0;margin-left:calc(var(--u) * 2);
  border:solid transparent;border-width:calc(var(--u) * 5) 0 calc(var(--u) * 5) calc(var(--u) * 8);}
.m-igc__voc--bot .m-igc__voc-play::after{border-left-color:#F0F2F5;}
.m-igc__voc--io .m-igc__voc-play::after{border-left-color:#6C3CEE;}
.m-igc__voc-onda{flex:1 1 auto;display:flex;align-items:center;gap:calc(var(--u) * 2.4);
  height:calc(var(--u) * 26);min-width:calc(var(--u) * 92);}
.m-igc__voc-onda i{flex:1 1 auto;min-width:calc(var(--u) * 2);border-radius:999px;background:currentColor;opacity:.55;}
.m-igc__voc-t{flex:0 0 auto;font:400 calc(var(--u) * 13)/1 var(--igf);opacity:.7;}
/* H2c . la foto inviata in chat. Nei foto contest la partecipazione e' lo scatto:
   niente bolla intorno, solo l'immagine con gli angoli della chat. L'ingombro e'
   fissato da aspect-ratio, cosi' la colonna non salta quando la foto arriva. */
.m-igc__foto{display:block;width:calc(var(--u) * 126);aspect-ratio:4/5;overflow:hidden;
  border-radius:calc(var(--u) * 22);background:#E8EAED;}
.m-igc__foto img{display:block;width:100%;height:100%;object-fit:cover;}
.m-igc__r--io .m-igc__foto{border-bottom-right-radius:calc(var(--u) * 6);}
.m-igc__r--bot .m-igc__foto{border-bottom-left-radius:calc(var(--u) * 6);}
.m-igc__btn{display:block;margin-top:calc(var(--u) * 10);padding:calc(var(--u) * 10) calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:#fff;
  font:700 calc(var(--u) * 16)/calc(var(--u) * 21) var(--igf);color:#0C0F14;text-align:center;}
.m-igc__btn + .m-igc__btn{margin-top:calc(var(--u) * 6);}
.m-igc__bot:has(.m-igc__btn){font-weight:700;}
.m-igc__typ{display:flex;align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 13) calc(var(--u) * 15);border-radius:calc(var(--u) * 22);background:#F0F2F5;}
.m-igc__typ i{width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:50%;background:#A8ABB0;animation:igc-typ 1.2s infinite;}
.m-igc__typ i:nth-child(2){animation-delay:.16s;}
.m-igc__typ i:nth-child(3){animation-delay:.32s;}
@keyframes igc-typ{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(calc(var(--u) * -3));}}
.m-igc__bar{flex:0 0 auto;padding:calc(var(--u) * 5) calc(var(--u) * 8) calc(var(--u) * 12);background:#fff;}
.m-igc__pill{display:flex;align-items:center;height:calc(var(--u) * 44);border-radius:999px;background:#F0F2F5;padding:0 calc(var(--u) * 12) 0 calc(var(--u) * 5);}
.m-igc__cam{width:calc(var(--u) * 34);height:calc(var(--u) * 34);flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#5454F0;}
.m-igc__cam svg{width:calc(var(--u) * 19);height:calc(var(--u) * 19);display:block;}
.m-igc__in{flex:1;min-width:0;padding-left:calc(var(--u) * 10);font:400 calc(var(--u) * 16)/1 var(--igf);color:#8E8E93;}
.m-igc__ico{display:flex;align-items:center;gap:calc(var(--u) * 14);flex:0 0 auto;}
.m-igc__ico svg{width:calc(var(--u) * 24);height:calc(var(--u) * 24);display:block;}
/* Lo scontrino e la validazione automatica dentro la chat.
   Serve ai concorsi con acquisto: la persona manda la prova d'acquisto e GIVEAWAI(R)
   la legge e la valida. Lo scontrino e' disegnato, non una foto: niente file in piu'
   e nessun dato di un vero acquisto in pagina. */
.m-igc__ric{position:relative;width:calc(var(--u) * 126);padding:calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius:calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 5) calc(var(--u) * 18);
  background:linear-gradient(150deg,#DCDEE6,#C6C9D4);overflow:hidden;
  box-shadow:0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(11,11,13,.18);}
/* la carta dello scontrino dentro la foto, un filo ruotata */
.m-igc__ric::before{content:"";position:absolute;left:calc(var(--u) * 12);right:calc(var(--u) * 12);
  top:calc(var(--u) * 10);bottom:calc(var(--u) * -4);border-radius:calc(var(--u) * 3);background:#fff;
  transform:rotate(-2.2deg);box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(11,11,13,.2);}
.m-igc__ric i{position:relative;z-index:1;display:block;height:calc(var(--u) * 5);margin-bottom:calc(var(--u) * 7);border-radius:calc(var(--u) * 3);background:#E9E9ED;}
.m-igc__ric i:nth-child(1){width:58%;height:calc(var(--u) * 9);background:#CFCFD6;}
.m-igc__ric i:nth-child(2){width:88%;}
.m-igc__ric i:nth-child(3){width:72%;}
.m-igc__ric i:nth-child(4){width:84%;}
.m-igc__ric i:nth-child(5){width:46%;height:calc(var(--u) * 8);background:#CFCFD6;}
.m-igc__ric i:nth-child(6){width:0;margin:0;}
/* il bordo dentellato in basso, come la carta strappata */
.m-igc__ric b{z-index:1;position:absolute;left:0;right:0;bottom:calc(var(--u) * -5);height:calc(var(--u) * 10);
  background:radial-gradient(circle at 50% 0,transparent calc(var(--u) * 5),#fff calc(var(--u) * 5));
  background-size:calc(var(--u) * 11) 100%;}

.m-igc__ai{position:relative;width:calc(var(--u) * 196);padding:calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius:calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 5);
  background:#F1F1F3;overflow:hidden;}
.m-igc__ai-scan{position:absolute;left:0;right:0;top:0;height:calc(var(--u) * 46);
  background:linear-gradient(180deg,transparent,rgba(253,36,191,.26) 70%,rgba(253,36,191,.9));
  animation:igc-scan 1.5s cubic-bezier(.45,0,.55,1) 1 forwards;}
@keyframes igc-scan{from{transform:translateY(calc(var(--u) * -46));}to{transform:translateY(calc(var(--u) * 150));opacity:0;}}
.m-igc__ai-t{margin:0 0 calc(var(--u) * 9);font:700 calc(var(--u) * 14)/1.3 var(--igf);color:#0C1014;}
.m-igc__ai-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--u) * 6);}
.m-igc__ai-l li{display:flex;align-items:center;gap:calc(var(--u) * 7);
  font:500 calc(var(--u) * 13)/1.25 var(--igf);color:#3C3C43;
  opacity:0;animation:igc-voce .4s var(--w-ease) both;}
.m-igc__ai-l li:nth-child(1){animation-delay:1.0s;}
.m-igc__ai-l li:nth-child(2){animation-delay:1.3s;}
.m-igc__ai-l li:nth-child(3){animation-delay:1.6s;}
.m-igc__ai-l li:nth-child(4){animation-delay:1.9s;}
.m-igc__ai-l li::before{content:"";flex:0 0 auto;width:calc(var(--u) * 15);height:calc(var(--u) * 15);border-radius:50%;
  background:#34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.6l4.6 4.6L19 7.8'/%3E%3C/svg%3E") center/68% no-repeat;}
@keyframes igc-voce{from{opacity:0;transform:translateX(calc(var(--u) * -6));}to{opacity:1;transform:none;}}
.m-igc__ai-f{margin:calc(var(--u) * 11) 0 0;padding-top:calc(var(--u) * 9);border-top:1px solid rgba(11,11,13,.09);
  font:800 calc(var(--u) * 11)/1 var(--igf);letter-spacing:.04em;text-transform:uppercase;color:var(--w-pink);
  opacity:0;animation:igc-voce .5s var(--w-ease) 2.2s both;}
.m-igc__ai-f sup{font-size:.72em;}
@media (prefers-reduced-motion:reduce){
  .m-igc__typ i,.m-igc__r{animation:none;}
  .m-igc__ai-scan{display:none;}
  .m-igc__ai-l li,.m-igc__ai-f{opacity:1;animation:none;}
}

.m-msg{max-width:86%;padding:8px 12px;border-radius:15px 15px 15px 4px;background:var(--w-mist);font:600 clamp(11px,.9vw,13px)/1.3 var(--w-sans);transform-origin:0 100%;animation:m-bubble .55s var(--w-ease) both;}
.m-msg--user{align-self:flex-end;border-radius:15px 15px 4px 15px;background:var(--w-ink);color:#fff;transform-origin:100% 100%;}
.m-msg--win{background:var(--w-stroke);color:#fff;font-weight:800;}
.m-msg--typing{display:inline-flex;gap:4px;padding:11px 13px;}
.m-msg--typing i{width:5px;height:5px;border-radius:50%;background:rgba(11,11,13,.45);animation:m-dot 1s ease-in-out infinite;}
.m-msg--typing i:nth-child(2){animation-delay:.15s;}
.m-msg--typing i:nth-child(3){animation-delay:.3s;}
@keyframes m-bubble{from{opacity:0;transform:scale(.55) translateY(10px);}to{opacity:1;transform:none;}}
@keyframes m-dot{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-4px);opacity:1;}}
html.sig-off .m-msg{border-radius:15px;}

.m-dark{display:grid;place-items:center;align-content:center;gap:8px;min-height:clamp(160px,14vw,200px);padding:22px;border-radius:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) var(--w-tail);background:var(--w-ink);color:#fff;text-align:center;}
.m-dark .m-tile__kpi{font:800 clamp(44px,4.3vw,66px)/1 var(--w-sans);letter-spacing:-.05em;color:var(--w-blue);}
.m-dark .m-tile__label{font:600 clamp(12px,1vw,15px)/1.3 var(--w-sans);color:rgba(255,255,255,.86);max-width:22ch;}

/* MOD-V · Creative video a pieno campo. Il poster e' una <img> vera sotto il video,
   cosi' resta visibile prima, durante il caricamento e dopo un pause: l'attributo
   poster sparisce dopo il primo play e lasciava il frame bianco. Il video arriva
   solo quando la tile entra in viewport (blocco D-ter del JS): zero byte al load. */
.m-vid{position:absolute;inset:0;overflow:hidden;background:#111;}
.m-vid > img,.m-vid > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.m-vid > video{opacity:0;transition:opacity .45s var(--w-ease);}
.m-vid > video.is-playing{opacity:1;}
.m-tile--media > .m-vid,.m-tile--story > .m-vid{border-radius:inherit;}

/* MOD-H3 · Commenti TikTok: la meccanica Comment Picker senza chatbot, dove la
   partecipazione resta pubblica sotto il video. I commenti entrano in sequenza,
   poi uno viene estratto. Niente dati personali, niente consensi: su TikTok non
   esiste chatbot (vedi _docs/formati-per-canale.md). */
.m-ttc{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;
  border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);
  background:#fff;color:var(--w-ink);font-family:var(--w-sans);
  box-shadow:0 2px 4px rgba(11,11,13,.05),0 40px 90px rgba(3,5,30,.24);}
.m-ttc__head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:clamp(13px,1.3vw,17px) clamp(15px,1.5vw,20px);
  border-bottom:1px solid var(--w-line);font:800 clamp(12px,1vw,13.5px)/1 var(--w-sans);}
.m-ttc__head b{font-weight:800;}
.m-ttc__head small{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--w-sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--w-gray);}
.m-ttc__head small i{width:6px;height:6px;border-radius:50%;background:var(--w-stroke);animation:m-ttc-puls 1.6s ease-in-out infinite;}
@keyframes m-ttc-puls{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
.m-ttc__flusso{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(8px,.9vw,12px);
  padding:clamp(12px,1.2vw,16px) clamp(15px,1.5vw,20px);overflow:hidden;
  transition:opacity .6s var(--w-ease),filter .6s var(--w-ease),transform .6s var(--w-ease);}
.m-ttc__flusso.is-chiude{opacity:0;filter:blur(5px);transform:translateY(-10px);}
.m-ttc__c{display:flex;align-items:flex-start;gap:9px;animation:m-ttc-in .46s cubic-bezier(.16,1,.3,1) both;}
@keyframes m-ttc-in{from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:none;}}
.m-ttc__av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--w-mist);
  display:grid;place-items:center;font:800 10px/1 var(--w-sans);color:var(--w-gray);overflow:hidden;}
.m-ttc__t{min-width:0;flex:1;}
.m-ttc__n{display:block;font:700 10.5px/1.2 var(--w-sans);color:var(--w-gray);}
.m-ttc__m{display:block;margin-top:2px;font:600 clamp(11px,.92vw,13px)/1.35 var(--w-sans);color:var(--w-ink);
  overflow-wrap:anywhere;}
.m-ttc__m em{font-style:normal;font-weight:800;color:var(--w-stroke);}
.m-ttc__cuore{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  font:700 9.5px/1 var(--w-sans);color:var(--w-gray);}
.m-ttc__cuore svg{width:13px;height:13px;fill:rgba(11,11,13,.22);}
.m-ttc__c.is-piace .m-ttc__cuore svg{fill:#FE2C55;animation:m-ttc-batte .5s var(--w-ease);}
@keyframes m-ttc-batte{0%{transform:scale(1);}45%{transform:scale(1.45);}100%{transform:scale(1);}}
/* il commento estratto: resta, gli altri sbiadiscono */
.m-ttc__flusso.is-estrae .m-ttc__c:not(.is-vince){opacity:.22;filter:saturate(.3);transition:opacity .5s var(--w-ease),filter .5s var(--w-ease);}
.m-ttc__c.is-vince{position:relative;padding:8px 10px;margin:-8px -10px;border-radius:14px 14px 14px 4px;
  background:var(--w-radiant-light);box-shadow:0 0 0 1.5px var(--w-stroke) inset;
  animation:m-ttc-vince .6s cubic-bezier(.16,1,.3,1) both;}
@keyframes m-ttc-vince{from{transform:scale(.96);}to{transform:scale(1);}}
.m-ttc__c.is-vince .m-ttc__n::after{content:"estratto";margin-left:6px;padding:2px 6px;border-radius:7px 7px 7px 2px;
  background:var(--w-stroke);font:800 8.5px/1.2 var(--w-sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;}
@media (prefers-reduced-motion:reduce){.m-ttc__c,.m-ttc__head small i{animation:none;}}

/* A · Hero bento: composizioni e superfici.
   Quattro composizioni (Onda, Mosaico, Nastro, Live) per due superfici (Radiant, Radiant Light).
   Canali su Radiant, format su Radiant Light. Due pagine vicine non condividono mai la stessa coppia. */
.m-bento--light{background:var(--w-radiant-light);color:var(--w-ink);}
.m-bento--light .m-tile--media{box-shadow:0 26px 60px rgba(20,30,90,.18);}

/* Tile storia: la creative con l'interfaccia di una storia, le barre avanzano con il reel */
.m-tile--story{box-shadow:var(--w-media-shadow);}
.m-tile--story .m-reel{position:absolute;inset:0;}
.m-tile--story::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 72%,rgba(0,0,0,.5) 100%);}
.m-story__bars{position:absolute;z-index:4;top:12px;left:12px;right:12px;display:flex;gap:4px;}
.m-story__bars i{flex:1;height:3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.38);}
.m-story__bars i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;}
.m-story__bars i.is-done::after{transform:none;}
.m-story__bars i.is-on::after{animation:m-story-fill var(--w-reel-every,4.2s) linear forwards;}
.m-bento.is-paused .m-story__bars i.is-on::after{animation-play-state:paused;}
@keyframes m-story-fill{to{transform:none;}}
.m-story__head{position:absolute;z-index:4;top:26px;left:12px;right:12px;display:flex;align-items:center;gap:8px;color:#fff;font:700 12px/1.2 var(--w-sans);}
.m-story__head img{width:26px;height:26px;padding:5px;border-radius:50% 50% 50% 14%;background:var(--w-ink);box-shadow:0 0 0 2px #fff;}
.m-story__head small{font-weight:600;opacity:.78;}
.m-story__reply{position:absolute;z-index:4;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;color:#fff;font:600 12px/1 var(--w-sans);}
.m-story__reply span{flex:1;height:36px;padding:0 14px;border:1px solid rgba(255,255,255,.72);border-radius:18px 18px 18px var(--w-tail-s);line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-story__reply svg{flex:none;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* Tile profilo: tre post del brand che cambiano a onda */
.m-feed{display:flex;flex-direction:column;gap:10px;padding:12px;box-shadow:var(--w-card-shadow);}
.m-feed__head{display:flex;align-items:center;gap:9px;padding:2px 4px 0;font:700 12px/1.2 var(--w-sans);}
.m-feed__head img{width:28px;height:28px;padding:5px;border-radius:14px 14px 14px 3px;background:var(--w-ink);}
.m-feed__head small{display:block;font-weight:600;color:var(--w-gray);}
.m-feed__head b{margin-left:auto;padding:6px 10px;border-radius:10px 10px 10px 3px;background:var(--w-ink);color:#fff;font:700 11px/1 var(--w-sans);}
.m-feed__grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-height:0;}
/* il feed si adatta a quante creative ci sono: con due o una non resta il buco nero */
.m-feed__grid:not(:has(> *:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr));}
.m-feed__grid:not(:has(> *:nth-child(2))){grid-template-columns:minmax(0,1fr);}
.m-feed__grid .m-reel{height:100%;min-height:120px;border-radius:12px 12px 12px var(--w-tail-s);}

/* Tile dato in orizzontale */
.m-tile--stat.is-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-rows:1fr auto;column-gap:clamp(10px,1vw,16px);}
.m-tile--stat.is-row .m-tile__kpi{grid-column:1;align-self:end;padding:0 6px;}
.m-tile--stat.is-row .m-tile__label{grid-column:1;height:auto;min-height:calc(2 * 1.3em);padding:8px 6px 4px;}
.m-tile--stat.is-row .m-reel{grid-column:2;grid-row:1/3;aspect-ratio:auto;height:100%;}

/* Tile dato senza creative, per il Nastro */
.m-tile--stat.is-plain{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.6vw,22px);}
.m-tile--stat.is-plain .m-tile__kpi{padding:0;font-size:clamp(40px,3.8vw,58px);}
.m-tile--stat.is-plain .m-tile__label{height:auto;padding:10px 0 0;}
.m-tile--stat.is-plain .w-label{margin-bottom:auto;}

.m-dark--pink .m-tile__kpi{color:var(--w-pink);}

/* A2 · Mosaico: blocco rettangolare su 12 colonne e 2 righe. Silhouette piena, niente arco. */

/* ---------------------------------------------------------------------------
   La famiglia Onda col telefono al centro: A1b, A1c, A1d.
   Stessa idea, tre tagli diversi secondo il formato delle creative ai lati.
   La regola che le tiene insieme: l'onda sale verso il centro e i due lati si
   specchiano. Se le creative non permettono la simmetria, la hero non e' pronta:
   si cambiano le creative, non la composizione.
   --------------------------------------------------------------------------- */
.m-bento--onda2 .m-bento__col,
.m-bento--onda3 .m-bento__col,
.m-bento--onda4 .m-bento__col{padding-bottom:0;}
.m-bento--onda2 .m-bento__col--lato .m-tile--media > .m-reel,
.m-bento--onda2 .m-bento__col--lato .m-vid,
.m-bento--onda3 .m-bento__col--lato .m-tile--media > .m-reel,
.m-bento--onda3 .m-bento__col--lato .m-vid,
.m-bento--onda4 .m-bento__col--lato .m-tile--media > .m-reel,
.m-bento--onda4 .m-bento__col--lato .m-vid{position:absolute;inset:0;}
.m-bento--onda2 .m-bento__col--telefono,
.m-bento--onda3 .m-bento__col--telefono,
.m-bento--onda4 .m-bento__col--telefono{justify-self:center;width:100%;}
.m-bento--onda2 .m-device,
.m-bento--onda3 .m-device,
.m-bento--onda4 .m-device{width:100%;}

/* A1b · Onda bis: cinque card in fila, al centro un telefono.
   Si usa quando TUTTE e quattro le card ai lati sono in formato reel (9:16).
   Con quattro reel i lati pesano uguale e il telefono svetta da solo: e' il taglio
   piu' pulito della famiglia. Con creative 4:5 o 1:1 si passa ad A1c. */
.m-bento--onda2 .m-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  align-items:center;gap:clamp(12px,1.5vw,22px);max-width:1180px;}
@media (max-width:1080px){
  .m-bento--onda2 .m-bento__grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(16px,2vw,26px);}
  .m-bento--onda2 .m-bento__col--telefono{grid-column:1/-1;order:-1;width:min(100%,260px);}
}
@media (max-width:640px){ .m-bento--onda2 .m-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* A1c · Onda tris: due card per lato, impilate, e il telefono al centro.
   Si usa quando le creative ai lati sono tutte 4:5 oppure tutte 1:1. Quattro card
   basse in fila lascerebbero il telefono a torreggiare da solo: impilandole a due a
   due ogni lato torna alto quanto il telefono e la composizione si chiude. */
.m-bento--onda3 .m-bento__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;gap:clamp(12px,1.5vw,22px);max-width:820px;}
.m-bento--onda3 .m-bento__col--lato{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);}
@media (max-width:860px){
  .m-bento--onda3 .m-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(16px,2vw,26px);}
  .m-bento--onda3 .m-bento__col--telefono{grid-column:1/-1;order:-1;width:min(100%,250px);}
  .m-bento--onda3 .m-bento__col--lato{flex-direction:row;}
}

/* A1d · Onda quater: formati diversi ai lati, specchiati.
   Si usa quando le creative ai lati non sono tutte dello stesso formato: una per
   lato in reel, una per lato in 4:5 o 1:1. Le colonne esterne sono piu' larghe
   delle interne, cosi' una 4:5 larga e una reel stretta arrivano ad altezze vicine
   e l'onda sale senza gradini. La simmetria non e' negoziabile: a sinistra e a
   destra gli stessi due formati, nello stesso ordine verso il centro. */
.m-bento--onda4 .m-bento__grid{grid-template-columns:minmax(0,1.16fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.16fr);
  align-items:center;gap:clamp(12px,1.5vw,22px);max-width:1248px;}
@media (max-width:1080px){
  .m-bento--onda4 .m-bento__grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(16px,2vw,26px);}
  .m-bento--onda4 .m-bento__col--telefono{grid-column:1/-1;order:-1;width:min(100%,260px);}
}
@media (max-width:640px){ .m-bento--onda4 .m-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* A3 · Nastro: creative che scorrono a tutta larghezza, una card ferma al centro */
.m-bento__stage{position:relative;z-index:2;margin:clamp(40px,4vw,60px) calc(var(--w-page-pad) * -1) 0;}
.m-bento__ribbon{overflow:hidden;padding:30px 0 72px;-webkit-mask:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);}
.m-bento__track .m-tile--media{box-shadow:0 20px 44px rgba(3,5,16,.22);}
.m-bento__track{--gap:clamp(12px,1.5vw,22px);display:flex;align-items:flex-start;gap:var(--gap);width:max-content;padding-left:var(--gap);will-change:transform;}
.m-bento__ribbon.is-looping .m-bento__track{animation:m-ribbon var(--w-ribbon-dur,60s) linear infinite;animation-play-state:paused;}
.m-bento__ribbon.is-running .m-bento__track{animation-play-state:running;}
@keyframes m-ribbon{to{transform:translate3d(-50%,0,0);}}
.m-bento__track > *{flex:none;width:clamp(170px,15.5vw,236px);aspect-ratio:4/5;}
.m-bento__track > .is-low{margin-top:clamp(22px,2.4vw,36px);}
.m-bento__track .m-tile--media .m-reel,.m-bento__track .m-tile--media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.m-bento__focus{position:absolute;z-index:3;left:50%;top:50%;width:clamp(270px,24vw,340px);transform:translate(-50%,-50%);}
/* Le creative che passano dietro la card si sfocano */
/* Il velo sfocato dietro il fuoco e' stato tolto il 6 ottobre: comunque mascherato,
   il bordo del rettangolo restava visibile. Il fuoco si stacca gia' con la sua ombra. */
.m-bento__focus .m-chat{height:clamp(250px,22vw,300px);box-shadow:0 2px 4px rgba(11,11,13,.06),0 40px 90px rgba(3,5,30,.34);}
/* al centro del Nastro puo' stare anche il pannello Instant Win, da quando A4 Live
   e' uscita dal sistema: stessa ombra della chat, altezza dal contenuto */
.m-bento__focus .m-live{box-shadow:0 2px 4px rgba(11,11,13,.06),0 40px 90px rgba(3,5,30,.34);}
/* Un telefono al centro del Nastro: va dimensionato sulla fascia, non sulla larghezza
   del fuoco. A 340px sarebbe alto 703px e passerebbe sopra al lead e ai bottoni. */
.m-bento__focus .m-device{width:clamp(168px,15.8vw,228px);margin:0 auto;
  filter:drop-shadow(0 34px 60px rgba(3,5,18,.42));}
/* i commenti TikTok dentro una colonna dell'Onda prendono l'altezza della chat:
   da soli collasserebbero sul contenuto */
.m-bento__col .m-ttc{height:clamp(230px,20.5vw,268px);}

.m-live{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);padding:clamp(16px,1.8vw,26px);border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);background:#fff;color:var(--w-ink);font-family:var(--w-sans);box-shadow:0 2px 4px rgba(11,11,13,.05),0 40px 90px rgba(3,5,30,.24);}
.m-live__bar{display:flex;align-items:center;gap:10px;padding-bottom:clamp(12px,1.2vw,16px);border-bottom:1px solid var(--w-line);font:700 12.5px/1.2 var(--w-sans);}
.m-live__bar img{width:30px;height:30px;padding:6px;border-radius:15px 15px 15px 3px;background:var(--w-ink);}
.m-live__bar small{display:block;font-weight:600;color:var(--w-gray);}
.m-live__bar b{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px 10px 10px 3px;background:var(--w-mist);font:700 10px/1 var(--w-sans);letter-spacing:.08em;text-transform:uppercase;}
/* il pallino che pulsa: l'animazione stava dentro il Modulo D, tolto il
   30/9, quindi ora vive qui col nome del modulo che la usa */
@keyframes m-live-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.72);}}
.m-live__bar b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-pink);animation:m-live-pulse 1.6s ease-in-out infinite;}
.m-live__main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:clamp(14px,2vw,28px);}
.m-live__count span{display:block;font:800 clamp(46px,4.6vw,72px)/.95 var(--w-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:var(--w-stroke);-webkit-background-clip:text;background-clip:text;color:transparent;}
.m-live__count small,.m-live__prizes small{display:block;margin-top:8px;font:600 13px/1.3 var(--w-sans);color:var(--w-gray);}
.m-live__prizes{padding:12px 14px;border-radius:16px 16px 16px var(--w-tail-s);background:var(--w-sky);}
.m-live__prizes small{margin:0 0 4px;}
.m-live__prizes b{display:block;font:800 22px/1 var(--w-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.m-live__prizes em{display:block;height:6px;margin-top:12px;overflow:hidden;border-radius:3px;background:rgba(11,11,13,.08);}
.m-live__prizes em i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--w-stroke);transform:scaleX(var(--p,.3));transform-origin:left;transition:transform 1s var(--w-ease);}
.m-live__feed{display:flex;flex-direction:column;gap:6px;height:calc(4 * 50px + 3 * 6px);margin:0;padding:0;overflow:hidden;list-style:none;}
.m-live__feed li{flex:none;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;height:50px;padding:0 8px;border-radius:14px 14px 14px var(--w-tail-s);background:var(--w-mist);font:700 13px/1.2 var(--w-sans);}
.m-live__feed li.is-new{animation:m-live-in .8s var(--w-ease) both;}
.m-live__feed i{display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 14%;background:var(--w-ink);color:#fff;font:800 12px/1 var(--w-sans);font-style:normal;}
.m-live__feed small{display:block;font-weight:600;color:var(--w-gray);}
.m-live__feed b{padding:7px 10px;border-radius:10px 10px 10px 3px;background:#fff;color:var(--w-gray);font:700 11px/1 var(--w-sans);}
.m-live__feed li.is-win{background:#fff;box-shadow:inset 0 0 0 1px var(--w-line);}
.m-live__feed li.is-win i{background:var(--w-radiant);}
.m-live__feed li.is-win b{background:var(--w-stroke);color:#fff;}
@keyframes m-live-in{from{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
.m-live__note{align-self:flex-end;font:600 10.5px/1 var(--w-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--w-gray);}
html.sig-off .m-live__feed li,html.sig-off .m-live__prizes,html.sig-off .m-story__reply span{border-radius:14px;}

@media (max-width:1080px){
}
@media (max-width:760px){
  .m-tile--stat.is-row{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:14px 12px;}
  .m-tile--stat.is-row .m-reel{display:none;}
  .m-tile--stat.is-row .m-tile__kpi{font-size:clamp(30px,9vw,40px);}
  .m-feed__grid .m-reel{min-height:0;aspect-ratio:4/5;}
  .m-bento__stage{margin-top:32px;}
  .m-bento__ribbon{padding:16px 0 30px;}
  .m-bento__track > *{width:150px;}
  .m-bento__focus{position:relative;left:auto;top:auto;width:min(100%,340px);margin:-44px auto 0;padding:0 var(--w-page-pad);transform:none;}
  .m-story__reply{gap:8px;}
  .m-story__reply span{height:32px;padding:0 10px;line-height:30px;}
  .m-story__reply svg:first-of-type{display:none;}
  .m-bento__focus .m-chat{height:250px;}
  .m-live__main{grid-template-columns:1fr;}
  .m-live__feed{height:calc(3 * 50px + 2 * 6px);}
}
@media (prefers-reduced-motion:reduce){
  .m-bento__ribbon.is-looping .m-bento__track{animation:none;}
  .m-story__bars i.is-on::after{animation:none;transform:none;}
  .m-live__feed li.is-new{animation:none;}
  .m-live__bar b::before{animation:none;}
}

/* B · Come funziona un format */
.m-explainer{padding:var(--w-section-pad) var(--w-page-pad);}
.m-explainer__head{max-width:820px;margin:0 auto var(--w-heading-gap);text-align:center;}
.m-explainer__head .w-kicker{margin-bottom:16px;}
.m-explainer__grid{display:grid;grid-template-columns:1fr minmax(260px,340px) 1fr;align-items:center;gap:clamp(32px,6vw,96px);max-width:1180px;margin:0 auto;}
.m-explainer__intro{font:600 clamp(20px,1.7vw,25px)/1.38 var(--w-sans);letter-spacing:-.01em;max-width:24ch;justify-self:end;}
.m-explainer__intro .w-actions{margin-top:28px;}
.m-device{position:relative;width:100%;aspect-ratio:436/902;filter:drop-shadow(0 34px 44px rgba(3,5,18,.22));}
.m-device__frame{position:absolute;z-index:2;inset:0;background:url('../industries/device/iphone-mockup.png') center/contain no-repeat;pointer-events:none;}
.m-device__screen{position:absolute;z-index:1;inset:1.8% 4.15%;overflow:hidden;border-radius:clamp(26px,9%,42px);background:#000;}
.m-device__screen img{width:100%;height:100%;object-fit:cover;}
/* Video dimostrativo dentro il telefono: parte quando entra in schermo, il poster resta sotto
   cosi' non c'e' mai un fotogramma vuoto. Finche' non parte non scarica un byte. */
.m-device__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--w-ease);}
.m-device__video.is-playing{opacity:1;}
/* La chat Instagram dentro il telefono: e' il modulo H del prototipo portato nel
   sistema. Lo schermo diventa il contenitore su cui la chat misura la sua scala,
   e il padding in alto lascia libera la Dynamic Island. Si usa dove la meccanica
   e' il soggetto, al posto della card chat larga e bassa. */
.m-device__screen--chat{container-type:inline-size;background:#fff;}
.m-device__screen--chat > .m-igc{--u:calc(100cqw / 318);height:100%;padding-top:calc(var(--u) * 44);}
/* .m-device__screen img impone 100% a tutte le immagini dello schermo: dentro la chat
   farebbe esplodere gli avatar, che hanno misure proprie legate a --u. */
.m-device__screen--chat .m-igc__av{width:calc(var(--u) * 36);height:calc(var(--u) * 36);object-fit:cover;}
.m-device__screen--chat .m-igc__mini{width:calc(var(--u) * 28);height:calc(var(--u) * 28);object-fit:cover;}
.m-device::after{content:"";position:absolute;z-index:3;left:50%;top:2.9%;width:29.4%;height:4%;transform:translateX(-50%);border-radius:999px;background:#020202;}
.m-explainer__steps{display:grid;gap:clamp(30px,3.4vw,48px);list-style:none;max-width:34ch;}
.m-explainer__steps .w-label{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--w-ink);letter-spacing:.12em;}
.m-explainer__steps .w-label b{display:grid;place-items:center;width:28px;height:28px;border-radius:14px 14px 14px var(--w-tail-s);background:var(--w-ink);color:#fff;letter-spacing:0;font-size:11px;}

/* C · FAQ + richiesta info */
.m-faq{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:clamp(40px,8vw,140px);align-items:start;padding:var(--w-section-pad) var(--w-page-pad);max-width:1240px;margin:0 auto;}
.m-faq__head{margin-bottom:var(--w-heading-gap);}
.m-faq__head .w-kicker{margin-bottom:16px;}
.m-faq__aside{position:sticky;top:110px;padding-top:6px;}
.m-faq__aside .w-label{color:var(--w-gray);margin-bottom:18px;}
.m-faq__aside .w-actions{margin-top:28px;}

@media (max-width:1080px){
  .m-bento__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .m-bento__col--3{grid-column:1/-1;order:-1;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
  /* La colonna 3 ospita due riquadri affiancati (conversazione DM + tile scura): a tablet la
     conversazione si adatta in altezza invece di restare fissa. */
  .m-bento__col--3 > .m-igdm{height:auto;min-height:clamp(240px,27vw,280px);}
  .m-dark{min-height:0;}
  .m-bento__col{padding-bottom:0!important;}
  .m-explainer__grid{grid-template-columns:1fr 300px;}
  .m-explainer__intro{grid-column:1/-1;justify-self:center;text-align:center;max-width:36ch;}
  .m-explainer__intro .w-actions{justify-content:center;}
}
@media (max-width:760px){
  .m-bento{border-radius:0 0 var(--w-section-radius) var(--w-section-radius);}
  .m-bento__actions .w-actions{flex-direction:column;align-items:stretch;}
  .m-bento__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .m-bento__col--3{grid-template-columns:1fr;}
  .m-bento__col--4,.m-bento__col--5{display:none;}
  .m-explainer__grid{grid-template-columns:1fr;justify-items:center;}
  .m-explainer__intro{text-align:left;justify-self:start;}
  .m-explainer__intro .w-actions{justify-content:flex-start;}
  .m-device{width:min(72vw,300px);}
  .m-faq{grid-template-columns:1fr;}
  .m-faq__aside{position:static;padding:28px;border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);background:var(--w-lilac);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}



/* ---------- Checklist con il fumetto ---------- */
.w-checklist{display:grid;gap:12px;margin-top:26px;list-style:none;}
.w-checklist li{position:relative;padding-left:32px;font:400 16px/1.45 var(--w-serif);color:inherit;}
.w-checklist li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:9px 9px 9px 2px;background:var(--w-ink);}
.w-checklist li::after{content:"";position:absolute;left:6px;top:7px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);}
.is-dark .w-checklist li::before{background:#fff;}
.is-dark .w-checklist li::after{border-color:var(--w-ink);}
.w-checklist b{font-family:var(--w-sans);font-weight:700;}
/* Il Modulo D (classi m-dash, m-mod) e la sua checklist sincronizzata
   sono stati tolti il 30/9: ritirato il 21/9 e sostituito da MOD-J,
   il codice era rimasto senza nessuna pagina che lo usasse. */

/* ===================================================================
   J · Webing Plus POV: la Smart Dashboard ripresa come se qualcuno la
   navigasse. Non e un video: sotto c'e la marcatura vera della dashboard
   della homepage (serve webing-homepage.css e la classe home-card-system
   sul contenitore), sopra una telecamera e un cursore guidati da un copione.
   Inquadrature e clic sono calcolati sulla posizione reale degli elementi,
   non su percentuali scritte a mano.
   =================================================================== */
.m-pov{position:relative;width:100%;padding:14px;border:1px solid rgba(11,11,13,.08);border-radius:36px;background:#fff;box-shadow:0 30px 80px rgba(41,38,93,.15);}
/* la telecamera avvolge la dashboard, la cornice e quella della homepage */
.m-pov__frame{position:relative;overflow:hidden;border-radius:24px;}
.m-pov__cam{transform-origin:50% 50%;transition:transform 1.15s cubic-bezier(.16,1,.3,1);will-change:transform;}
/* cursore vero: piccolo, misura fissa, fuori dalla telecamera */
.m-pov__cursor{position:absolute;z-index:40;width:19px;height:19px;margin:-1px 0 0 -1px;pointer-events:none;
  transition:left .85s cubic-bezier(.33,1,.5,1),top .85s cubic-bezier(.33,1,.5,1);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.m-pov__ring{position:absolute;z-index:39;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:rgba(236,41,180,.4);transform:scale(0);opacity:0;pointer-events:none;
  transition:left .85s cubic-bezier(.33,1,.5,1),top .85s cubic-bezier(.33,1,.5,1);}
.m-pov__frame.is-click .m-pov__ring{animation:pov-click .5s cubic-bezier(.16,1,.3,1);}
@keyframes pov-click{0%{transform:scale(.2);opacity:.9;}100%{transform:scale(1.5);opacity:0;}}
/* La targhetta sta sotto il riquadro, non sopra la dashboard: dentro finiva
   sempre a coprire una card. */
.m-pov__tag{display:block;margin:10px 4px 0;text-align:right;font:700 10px/1 var(--w-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--w-gray);}
@media (prefers-reduced-motion:reduce){ .m-pov__cam,.m-pov__cursor,.m-pov__ring{transition:none;} }

/* ============ AGGIUNTE AL DASHBOARD DELLA HOMEPAGE ============
   Solo quello che nella homepage non c'e: le schermate, il tooltip del grafico,
   e i pezzi delle due schermate nuove. Stessa scala in cqi, stesse classi dove
   possibile, cosi la tipografia resta quella del vostro CSS. */
.m-pov .dash-content{display:flex;flex-direction:column;}
.m-pov .pov-screens{position:relative;flex:1;min-height:0;}
.m-pov .pov-screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .4s ease;}
.m-pov .pov-screen.is-on{opacity:1;visibility:visible;}

/* La sidebar vera ha 16 voci contro le 11 del mock in homepage, e in basso ci sono
   tre card invece di due: senza questi ritocchi il contenuto esce dalla cornice. */
.m-pov .dash-plus-logo{margin:.3cqi auto 1.5cqi;}
.m-pov .dash-search{height:2.9cqi;margin-bottom:1cqi;font-size:.86cqi;}
.m-pov .dash-nav-label{margin:.55cqi .35cqi .35cqi;font-size:.62cqi;}
.m-pov .dash-nav-item{height:2.15cqi;font-size:.86cqi;margin:.05cqi 0;}
.m-pov .dash-nav-icon{width:1.15cqi;height:1.15cqi;flex-basis:1.15cqi;}
.m-pov .dash-nav-divider{margin:.6cqi 0;}
.m-pov .dash-bottom-grid{grid-template-columns:repeat(3,minmax(0,1fr));}

/* tooltip del grafico: compare quando il cursore passa sopra */
.m-pov .dash-performance-card{position:relative;}
.m-pov .pov-tip{position:absolute;left:44%;top:34%;z-index:6;padding:.7cqi .95cqi;border-radius:.8cqi;background:#0B0B0D;color:#fff;opacity:0;transform:translateY(.4cqi);transition:opacity .28s,transform .28s cubic-bezier(.16,1,.3,1);}
.m-pov .dash-performance-card.is-tip .pov-tip{opacity:1;transform:none;}
.m-pov .pov-tip b{display:block;font-size:.78cqi;font-weight:800;margin-bottom:.35cqi;}
.m-pov .pov-tip span{display:flex;justify-content:space-between;gap:1.6cqi;font-size:.72cqi;font-weight:600;}
.m-pov .pov-tip em{font-style:normal;font-weight:800;}
.m-pov .pov-cross{position:absolute;left:44%;top:16%;bottom:16%;width:1px;background:rgba(11,11,13,.2);opacity:0;transition:opacity .28s;}
.m-pov .dash-performance-card.is-tip .pov-cross{opacity:1;}

/* barra strumenti comune alle due schermate nuove */
.m-pov .pov-tools{display:flex;align-items:center;gap:.9cqi;margin-bottom:.9cqi;}
.m-pov .pov-tools .dash-date-chip{margin-top:0;}
.m-pov .pov-find{display:flex;align-items:center;gap:.5cqi;height:2.5cqi;padding:0 .9cqi;border:1px solid rgba(25,27,34,.08);border-radius:.65cqi;background:#fff;font-size:.7cqi;color:#9AA0AC;min-width:18cqi;}

/* vincitori */
.m-pov .pov-lab{font-size:.55cqi;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8F93A3;margin:0 0 .5cqi;}
.m-pov .pov-avs{display:flex;gap:.25cqi;margin-bottom:.9cqi;}
.m-pov .pov-avs span{width:2.4cqi;height:2.4cqi;border-radius:50%;border:.15cqi solid #fff;box-shadow:0 .1cqi .3cqi rgba(0,0,0,.12);}
.m-pov .pov-tab{flex:1;min-height:0;overflow:hidden;border-radius:1.35cqi;background:linear-gradient(120deg,#F2F4FE,#FBEFF8);}
.m-pov .pov-tr{display:grid;grid-template-columns:1.6fr 1.6fr .7fr .8fr 1.1fr .5fr .8fr;align-items:center;gap:.8cqi;padding:.85cqi 1.4cqi;border-bottom:1px solid rgba(11,11,13,.05);font-size:.72cqi;}
.m-pov .pov-tr--h{font-weight:800;color:#C41FA8;}
.m-pov .pov-u{display:flex;align-items:center;gap:.65cqi;}
.m-pov .pov-u i{width:2cqi;height:2cqi;border-radius:50%;flex:none;}
.m-pov .pov-u b{display:block;font-weight:700;}
.m-pov .pov-u small,.m-pov .pov-c small{display:block;font-size:.64cqi;color:#7A7E8B;}
.m-pov .pov-c b{display:block;font-weight:600;}
.m-pov .pov-prize{display:inline-block;padding:.35cqi .75cqi;border-radius:.55cqi;background:#E4ECFB;color:#2458C8;font-size:.66cqi;font-weight:700;font-style:normal;}
.m-pov .pov-wait{display:inline-block;padding:.3cqi .7cqi;border-radius:.5cqi;background:#111;color:#fff;font-size:.64cqi;font-weight:700;font-style:normal;}
.m-pov .pov-mut{color:#8A8E9C;}

/* media */
.m-pov .pov-filters{display:flex;align-items:center;gap:.8cqi;margin-bottom:.9cqi;font-size:.72cqi;font-weight:600;}
.m-pov .pov-tog{width:2.2cqi;height:1.2cqi;border-radius:.6cqi;background:#D8DCE6;position:relative;flex:none;}
.m-pov .pov-tog::after{content:"";position:absolute;top:.15cqi;left:.15cqi;width:.9cqi;height:.9cqi;border-radius:50%;background:#fff;}
.m-pov .pov-sel{padding:.45cqi .8cqi;border:1px solid rgba(25,27,34,.08);border-radius:.6cqi;background:#fff;color:#4A4E5A;white-space:nowrap;}
.m-pov .pov-views{margin-left:auto;display:flex;gap:.35cqi;}
.m-pov .pov-views i{width:2cqi;height:2cqi;border-radius:.5cqi;border:1px solid rgba(25,27,34,.1);background:#fff;}
.m-pov .pov-views i.is-on{border-color:#2458C8;box-shadow:inset 0 0 0 1px #2458C8;}
.m-pov .pov-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;}
.m-pov .pov-peek{position:absolute;top:6%;bottom:6%;width:13cqi;overflow:hidden;border-radius:1.1cqi;filter:blur(.14cqi);opacity:.85;}
.m-pov .pov-peek img{width:100%;height:100%;object-fit:cover;}
.m-pov .pov-peek--l{left:21%;} .m-pov .pov-peek--r{right:21%;}
.m-pov .pov-card{position:relative;z-index:3;display:flex;flex-direction:column;height:92%;aspect-ratio:9/12;overflow:hidden;border-radius:1.2cqi;background:#111;color:#fff;box-shadow:0 1.3cqi 2.8cqi rgba(5,8,25,.3);}
.m-pov .pov-media{position:absolute;inset:0;}
.m-pov .pov-media img{width:100%;height:100%;object-fit:cover;}
.m-pov .pov-card::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,rgba(8,8,12,.85),rgba(8,8,12,0));}
.m-pov .pov-card::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:24%;background:linear-gradient(0deg,rgba(8,8,12,.6),rgba(8,8,12,0));}
.m-pov .pov-who{position:relative;z-index:2;display:flex;align-items:center;gap:.6cqi;padding:.8cqi .85cqi 0;}
.m-pov .pov-who i{width:2cqi;height:2cqi;border-radius:50%;flex:none;background:linear-gradient(150deg,#C8A2C8,#7A6E8E);}
.m-pov .pov-who b{display:block;font-size:.8cqi;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-pov .pov-who small{display:block;font-size:.62cqi;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-pov .pov-chips{position:relative;z-index:2;display:flex;gap:.4cqi;padding:.6cqi .85cqi 0;}
.m-pov .pov-chip{display:grid;overflow:hidden;height:1.6cqi;border-radius:.5cqi;font:700 .64cqi/1.6cqi var(--sans);}
.m-pov .pov-chip i{grid-area:1/1;padding:0 .65cqi;font-style:normal;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s;}
.m-pov .pov-chip i:first-child{background:rgba(255,255,255,.88);color:#3A3E4A;}
.m-pov .pov-chip i:last-child{background:#12894F;color:#fff;transform:translateY(100%);}
.m-pov .pov-card.is-ok .pov-chip i:first-child{transform:translateY(-100%);opacity:0;}
.m-pov .pov-card.is-ok .pov-chip i:last-child{transform:none;}
.m-pov .pov-chip--u{background:#1D6FF0;color:#fff;padding:0 .65cqi;display:block;}
.m-pov .pov-acts{position:relative;z-index:2;margin-top:auto;display:flex;justify-content:flex-end;gap:.5cqi;padding:.85cqi;}
.m-pov .pov-acts span{display:grid;place-items:center;width:2.2cqi;height:2.2cqi;border-radius:50%;background:rgba(255,255,255,.92);color:#5A5E6A;font-size:1cqi;font-weight:800;}
.m-pov .pov-acts .ok{background:#E4F6EC;color:#12894F;}
.m-pov .pov-acts .no{background:#FBE9EA;color:#C4313C;}
.m-pov .pov-acts .ok.is-press{animation:pov-press .5s cubic-bezier(.16,1,.3,1);}
@keyframes pov-press{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(18,137,79,.5);}40%{transform:scale(.85);box-shadow:0 0 0 1cqi rgba(18,137,79,0);}100%{transform:scale(1);}}

/* Nello split il modulo ha bisogno di larghezza: la colonna del testo si stringe. */
/* Colonne pari come nel resto del sito: il modulo sta nella larghezza della card,
   non se la prende tutta, altrimenti la colonna di testo si allunga troppo. */
.w-split--pov{align-items:center;}
@media (max-width:980px){ .w-split--pov{grid-template-columns:minmax(0,1fr);} }
/* Sotto i 760 px il modulo occupa tutta la larghezza: cornice, cursore e targhetta
   vanno riproporzionati, altrimenti sembrano incollati sopra invece che dentro. */
@media (max-width:760px){
  .m-pov{padding:8px;border-radius:24px;}
  .m-pov__frame{border-radius:16px;}
  .m-pov__cursor{width:13px;height:13px;}
  .m-pov__ring{width:18px;height:18px;margin:-9px 0 0 -9px;}
  .m-pov__tag{margin-top:7px;font-size:8.5px;}
}

@media (prefers-reduced-motion:reduce){
  .m-pov__cam{transform:none!important;}
  .m-pov__cursor,.m-pov__ring{display:none;}
}


/* E · Trust: reputazione e sicurezza Webing, verso la fine delle pagine prodotto. Compatto, tutto Ink. */
/* il box resta dentro la colonna di contenuto: sopra i 1400px di finestra usciva
   di oltre cento pixel per lato rispetto a tutto il resto della pagina. 9/10 */
.m-trust{position:relative;overflow:hidden;max-width:var(--w-maxw);margin:0 auto;padding:clamp(40px,4.2vw,64px) clamp(22px,4vw,64px);border-radius:var(--w-section-radius);background:var(--w-ink);color:#fff;}
.m-trust__top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,64px);}
/* stesso modulo senza la nuvola del team: la copy prende tutta la riga
   invece di lasciare mezza fascia vuota */
.m-trust__top:not(:has(.m-trust__cloud)){grid-template-columns:minmax(0,1fr);}
.m-trust__copy .w-kicker{margin-bottom:14px;}
.m-trust__copy .w-h3{max-width:30ch;}
.m-trust__copy .w-lead{margin-top:14px;max-width:56ch;color:rgba(255,255,255,.8);font-size:clamp(17px,1.3vw,19px);font-weight:400;}

/* Il team intorno a Webing Plus, in piccolo */
.m-trust__cloud{position:relative;width:380px;height:240px;margin:-26px -40px;transform:scale(.78);}
.m-trust__avatar,.m-trust__mark{position:absolute;display:block;opacity:0;filter:blur(5px);transform:translate3d(0,18px,0) scale(.78) rotate(var(--r,0deg));}
.m-trust__avatar{z-index:1;width:70px;height:70px;overflow:hidden;border:3px solid rgba(255,255,255,.94);border-radius:50% 50% 50% 14%;background:#d9e6ff;box-shadow:0 13px 34px rgba(0,0,0,.35);}
.m-trust__avatar img{width:100%;height:100%;object-fit:cover;}
.m-trust__avatar:nth-child(1){top:0;left:155px;--r:-7deg;--d:0ms;}
.m-trust__avatar:nth-child(2){top:43px;left:229px;--r:4deg;--d:80ms;}
.m-trust__avatar:nth-child(3){top:128px;left:229px;--r:-3deg;--d:160ms;}
.m-trust__avatar:nth-child(4){top:170px;left:155px;--r:4deg;--d:240ms;}
.m-trust__avatar:nth-child(5){top:128px;left:81px;--r:-4deg;--d:320ms;}
.m-trust__avatar:nth-child(6){top:43px;left:81px;--r:3deg;--d:400ms;}
.m-trust__mark{top:70px;left:140px;z-index:2;display:grid;place-items:center;width:100px;height:100px;border-radius:50% 50% 50% 14%;background:#fff;box-shadow:0 16px 38px rgba(0,0,0,.4);--d:650ms;}
.m-trust__mark img{width:74%;height:auto;}
.m-trust.is-in .m-trust__avatar,.m-trust.is-in .m-trust__mark{animation:m-trust-in 1.05s var(--w-ease) var(--d) both;}
@keyframes m-trust-in{to{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1) rotate(var(--r,0deg));}}

/* Striscia di prove: sicurezza, due numeri, partner */
.m-trust__strip{display:grid;grid-template-columns:1.35fr .8fr .8fr 1.25fr;margin-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.12);}
.m-trust__cell{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;min-width:0;padding:clamp(22px,2.2vw,30px) clamp(18px,2vw,30px) 0;border-left:1px solid rgba(255,255,255,.12);}
.m-trust__cell:first-child{padding-left:0;border-left:0;}
.m-trust__cell:last-child{padding-right:0;}
.m-trust__cell .w-label{color:rgba(255,255,255,.58);}
.m-trust__badges{display:flex;align-items:center;gap:14px;margin:0;padding:0;list-style:none;}
.m-trust__badges span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;overflow:hidden;}
.m-trust__badges img{width:100%;height:100%;object-fit:contain;}
.m-trust__badges .is-eu img{filter:invert(1);}
.m-trust__badges .is-uk{background:#092248;clip-path:circle(49.5%);}
.m-trust__cell .w-link{margin-top:auto;padding-top:4px;font-size:14px;color:#fff;}
.m-trust__cell .w-kpi{font-size:clamp(40px,3.4vw,56px);white-space:nowrap;}
.m-trust__kpi-label{font:600 14px/1.35 var(--w-sans);color:rgba(255,255,255,.78);}
.m-trust__partners{display:grid;grid-template-columns:repeat(2,auto);align-items:center;justify-content:start;gap:14px 28px;margin:0;padding:0;list-style:none;}
.m-trust__partners img{display:block;height:26px;width:auto;opacity:.86;transition:opacity .4s var(--w-ease);}
.m-trust__partners img[src*="meta-business"]{height:36px;}
/* Il lockup Meta ha il simbolo prima delle parole: ManyChat, che sta
   sotto, rientra della stessa misura del simbolo (24px con il lockup a
   36px di altezza) cosi' le due scritte partono dalla stessa colonna.
   Il rientro sta dentro la larghezza del lockup Meta, quindi la colonna
   non si allarga e gli altri due loghi non si spostano. */
.m-trust__partners li:has(img[src*="manychat"]){padding-left:24px;}
.m-trust__partners li:hover img{opacity:1;}

@media (max-width:1080px){
  .m-trust__strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .m-trust__cell{padding-bottom:24px;}
  .m-trust__cell:nth-child(2){padding-right:0;}
  .m-trust__cell:nth-child(3){padding-left:0;border-left:0;}
  .m-trust__cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12);}
  .m-trust__cell:last-child{padding-bottom:0;}
}
@media (max-width:760px){
  .m-trust{border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);}
  .m-trust__top{grid-template-columns:minmax(0,1fr);}
  .m-trust__cloud{left:50%;margin:-40px 0 -44px;transform:translateX(-50%) scale(.64);}
  .m-trust__strip{grid-template-columns:1fr 1fr;}
  .m-trust__cell{padding:22px 0;border-left:0;border-top:1px solid rgba(255,255,255,.12);}
  .m-trust__cell:first-child{grid-column:1/-1;border-top:0;}
  .m-trust__cell:nth-child(3){padding-left:18px;border-left:1px solid rgba(255,255,255,.12);}
  .m-trust__cell:last-child{grid-column:1/-1;padding-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .m-trust__avatar,.m-trust__mark{opacity:1;filter:none;transform:rotate(var(--r,0deg));animation:none!important;}
}

/* F · Hero canali: split Radiant con il telefono che cambia canale. Per le pagine hub, così non somigliano alle pagine con bento. */
.m-hcan{position:relative;overflow:hidden;padding:clamp(150px,11.5vw,176px) var(--w-hero-inset) clamp(56px,6vw,96px);border-radius:0 0 var(--w-section-radius) var(--w-section-radius);background:var(--w-radiant);color:#fff;}
.m-hcan__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,4vw,72px);margin:0;}
.m-hcan__copy{min-width:0;}
.m-hcan__copy .w-kicker{margin-bottom:18px;}
.m-hcan__copy .w-lead{margin-top:22px;}
.m-hcan__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,3vw,36px);}
.m-hcan__tab{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;border:0;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff;font:700 13.5px/1 var(--w-sans);cursor:pointer;transition:color .5s var(--w-ease),box-shadow .5s var(--w-ease);}
.m-hcan__tab::before{content:"";position:absolute;z-index:-1;inset:0;background:#fff;transform:translateY(101%);transition:transform .55s var(--w-ease);}
.m-hcan__tab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.m-hcan__tab.is-active{color:var(--w-ink);box-shadow:inset 0 0 0 1px #fff;}
.m-hcan__tab.is-active::before{transform:none;}
.m-hcan__tab:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.m-hcan__copy .w-actions{margin-top:clamp(28px,3vw,40px);}

.m-hcan__stage{position:relative;height:clamp(520px,44vw,640px);perspective:1400px;}
.m-hcan__device{position:absolute;z-index:3;left:50%;top:50%;width:clamp(250px,21vw,300px);transform:translate(-50%,-50%) rotateY(var(--ry,0deg));transition:transform 1.2s var(--w-ease);filter:drop-shadow(0 40px 60px rgba(3,5,30,.35));}
.m-hcan__screen{position:absolute;inset:0;opacity:0;transform:scale(1.06);filter:blur(6px);transition:opacity .8s var(--w-ease),transform 1.1s var(--w-ease),filter .8s var(--w-ease);}
.m-hcan__screen.is-on{opacity:1;transform:none;filter:none;}
.m-hcan__screen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.m-hcan__screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 22%,transparent 58%,rgba(0,0,0,.55) 100%);pointer-events:none;}

/* UI del canale sopra la creative */
.m-hcan__ui{position:absolute;z-index:2;left:0;right:0;display:flex;align-items:center;gap:8px;padding:0 14px;color:#fff;font:700 11px/1.2 var(--w-sans);}
.m-hcan__ui--top{top:11%;}
.m-hcan__ui--bottom{bottom:5%;}
.m-hcan__ui i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--w-ink);font-style:normal;font-size:10px;font-weight:800;}
.m-hcan__ui small{display:block;font-weight:600;opacity:.8;}
.m-hcan__input{flex:1;height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.7);border-radius:16px;font:600 11px/30px var(--w-sans);}
.m-hcan__rail{position:absolute;z-index:2;right:10px;bottom:22%;display:grid;gap:12px;justify-items:center;color:#fff;font:700 9.5px/1 var(--w-sans);}
.m-hcan__rail span{display:grid;justify-items:center;gap:4px;}
.m-hcan__rail svg{width:22px;height:22px;fill:#fff;}
.m-hcan__bubbles{position:absolute;z-index:2;left:10px;right:10px;bottom:5%;display:flex;flex-direction:column;gap:6px;}
.m-hcan__bubbles p{max-width:84%;padding:7px 10px;border-radius:13px 13px 13px 4px;background:#fff;color:var(--w-ink);font:600 10.5px/1.3 var(--w-sans);opacity:0;transform:translateY(8px) scale(.9);transform-origin:0 100%;transition:opacity .5s var(--w-ease),transform .6s var(--w-ease);}
.m-hcan__bubbles p.is-user{align-self:flex-end;border-radius:13px 13px 4px 13px;background:var(--w-ink);color:#fff;transform-origin:100% 100%;}
.m-hcan__bubbles p.is-win{background:var(--w-stroke);color:#fff;font-weight:800;}
.m-hcan__screen.is-on .m-hcan__bubbles p{opacity:1;transform:none;}
.m-hcan__screen.is-on .m-hcan__bubbles p:nth-child(2){transition-delay:.7s;}
.m-hcan__screen.is-on .m-hcan__bubbles p:nth-child(3){transition-delay:1.4s;}
.m-hcan__form{position:absolute;z-index:2;left:10px;right:10px;bottom:5%;display:grid;gap:6px;padding:12px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--w-ink);font:700 11px/1.2 var(--w-sans);}
.m-hcan__form span{height:26px;padding:0 10px;border-radius:9px;background:var(--w-mist);color:var(--w-gray);font-weight:600;font-size:10px;line-height:26px;}
.m-hcan__form b{height:30px;border-radius:10px 10px 10px 3px;background:var(--w-ink);color:#fff;text-align:center;line-height:30px;}

/* Creative dietro il telefono */
.m-hcan__back{position:absolute;z-index:1;top:50%;width:clamp(170px,15vw,210px);aspect-ratio:4/5;border-radius:22px 22px 22px 6px;overflow:hidden;box-shadow:0 30px 60px rgba(3,5,30,.3);}
.m-hcan__back--l{left:2%;transform:translateY(-58%) rotate(-9deg);}
.m-hcan__back--r{right:2%;transform:translateY(-38%) rotate(8deg);}
.m-hcan__back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s var(--w-ease) .15s,transform 1.4s var(--w-ease) .15s;}
.m-hcan__back img.is-on{opacity:1;transform:none;}

/* Notifiche che volano sopra */
.m-hcan__float{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:18px 18px 18px 5px;background:#fff;color:var(--w-ink);box-shadow:0 22px 50px rgba(3,5,30,.28);font:700 12.5px/1.25 var(--w-sans);}
.m-hcan__float small{display:block;color:var(--w-gray);font-weight:600;font-size:11px;}
.m-hcan__float--a{left:-4%;bottom:14%;animation:m-hcan-float 6s ease-in-out infinite;}
.m-hcan__float--b{right:-4%;top:12%;animation:m-hcan-float 7s ease-in-out -2s infinite;}
.m-hcan__float .m-hcan__dot{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 14%;background:var(--w-radiant);color:#fff;}
.m-hcan__float .m-hcan__dot svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.m-hcan__count{font-variant-numeric:tabular-nums;}
.m-hcan__chname{display:inline-grid;overflow:hidden;vertical-align:bottom;height:1.25em;}
.m-hcan__chname span{grid-area:1/1;transition:transform .6s var(--w-ease),opacity .6s var(--w-ease);}
.m-hcan__chname span.is-out{transform:translateY(-100%);opacity:0;}
.m-hcan__chname span.is-in{transform:translateY(100%);opacity:0;}
@keyframes m-hcan-float{0%,100%{translate:0 0;}50%{translate:0 -8px;}}
html.sig-off .m-hcan__tab,html.sig-off .m-hcan__float,html.sig-off .m-hcan__back{border-radius:14px;}

@media (max-width:1080px){
  .m-hcan__inner{grid-template-columns:minmax(0,1fr);}
  .m-hcan__copy{width:100%;text-align:center;max-width:720px;margin:0 auto;}
  .m-hcan__copy .w-lead{margin-left:auto;margin-right:auto;}
  .m-hcan__tabs,.m-hcan__copy .w-actions{justify-content:center;}
  .m-hcan__stage{max-width:640px;width:100%;margin:0 auto;}
}
@media (max-width:760px){
  .m-hcan{padding-top:128px;}
  .m-hcan__tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-left:calc(var(--w-hero-inset) * -1);margin-right:calc(var(--w-hero-inset) * -1);padding:2px var(--w-hero-inset);scrollbar-width:none;}
  .m-hcan__tabs::-webkit-scrollbar{display:none;}
  .m-hcan__tab{flex:none;}
  .m-hcan__copy .w-actions{flex-direction:column;align-items:stretch;}
  .m-hcan__stage{height:500px;}
  .m-hcan__device{width:220px;}
  .m-hcan__back{width:130px;}
  .m-hcan__back--l{left:-4%;}
  .m-hcan__back--r{right:-4%;}
  .m-hcan__float{font-size:11.5px;padding:8px 12px 8px 8px;}
  .m-hcan__float--a{left:0;bottom:2%;}
  .m-hcan__float--b{right:0;top:2%;}
}
@media (prefers-reduced-motion:reduce){
  .m-hcan__device,.m-hcan__screen,.m-hcan__back img,.m-hcan__bubbles p,.m-hcan__tab::before{transition:none;}
  .m-hcan__float{animation:none;}
}

/* G · Hero testo: pagine istituzionali senza immagine (Company, Metodo, Contatti).
   Stessa apertura della style guide su Radiant Light sotto l'header: titolo display con una parola nel gradiente Webing, lead, 4 punti. Niente kicker, niente breadcrumb. */
/* MOD-P · Sequenza a tre passi (.m-seq)
   Sostituisce l'explainer col telefono quando il racconto e' un percorso e non
   un'interfaccia: copy a sinistra, i tre passi a destra. All'arrivo a schermo una
   linea si traccia dall'alto in basso e ogni passo entra quando la linea lo raggiunge,
   cosi' si legge che sono in ordine. Riusabile su altre pagine. 9/10. */
.m-seq{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:start;gap:clamp(36px,5vw,96px);max-width:1240px;margin:0 auto;}
.m-seq__copy{position:sticky;top:120px;min-width:0;}
.m-seq__copy .w-kicker{margin-bottom:16px;}
.m-seq__copy .w-h2{margin:0;}
.m-seq__copy .w-lead{margin-top:20px;max-width:42ch;}
.m-seq__copy .w-actions{margin-top:clamp(22px,2.4vw,32px);}
.m-seq__passi{position:relative;min-width:0;margin:0;padding:0 0 0 clamp(44px,4.6vw,64px);list-style:none;
  display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);}
/* la linea: binario fermo, sopra il tratto che si disegna */
/* la linea sta sotto ai passi e ai pallini: lo ::after del contenitore e' l'ultimo
   figlio della scatola, quindi senza z-index passerebbe sopra ai numeri */
.m-seq__passi::before{content:"";position:absolute;z-index:0;left:clamp(17px,1.8vw,25px);top:14px;bottom:14px;
  width:2px;border-radius:2px;background:var(--w-line);}
.m-seq__passi::after{content:"";position:absolute;z-index:0;left:clamp(17px,1.8vw,25px);top:14px;bottom:14px;
  width:2px;border-radius:2px;background:var(--w-stroke);transform-origin:50% 0;transform:scaleY(0);
  transition:transform 2.1s cubic-bezier(.33,1,.68,1) .15s;}
.m-seq__passi.is-in::after{transform:scaleY(1);}
.m-seq__passo{position:relative;z-index:1;min-width:0;padding:clamp(18px,1.9vw,26px) clamp(20px,2.1vw,28px);
  border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);
  background:#fff;box-shadow:0 2px 4px rgba(11,11,13,.05),0 24px 54px rgba(3,5,30,.09);
  opacity:0;transform:translateX(26px);
  transition:opacity .8s var(--w-ease) calc(.3s + var(--i,0) * .62s),
             transform 1s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i,0) * .62s),
             box-shadow .5s var(--w-ease);}
.m-seq__passi.is-in .m-seq__passo{opacity:1;transform:none;}
.m-seq__passo:is(:hover,:focus-within){box-shadow:0 2px 4px rgba(11,11,13,.05),0 34px 70px rgba(3,5,30,.16);}
/* il pallino numerato, agganciato alla linea */
.m-seq__n{position:absolute;z-index:2;left:calc(clamp(44px,4.6vw,64px) * -1);top:clamp(18px,1.9vw,26px);
  display:grid;place-items:center;width:clamp(34px,3.6vw,50px);height:clamp(34px,3.6vw,50px);
  border-radius:50%;background:var(--w-mist);color:var(--w-gray);
  font:800 13px/1 var(--w-sans);letter-spacing:-.02em;
  transition:background .6s var(--w-ease) calc(.42s + var(--i,0) * .62s),
             color .6s var(--w-ease) calc(.42s + var(--i,0) * .62s),
             box-shadow .6s var(--w-ease) calc(.42s + var(--i,0) * .62s);}
.m-seq__passi.is-in .m-seq__n{background:var(--w-stroke);color:#fff;box-shadow:0 0 0 6px rgba(253,36,191,.14);}
.m-seq__passo .w-h4{margin:0 0 8px;}
.m-seq__passo .w-body-s{margin:0;max-width:48ch;}
/* su superficie scura o Radiant i passi restano bianchi, la linea si schiarisce */
.w-on-radiant .m-seq__passi::before,.is-dark .m-seq__passi::before{background:rgba(255,255,255,.3);}
.w-on-radiant .m-seq__passo,.is-dark .m-seq__passo{color:var(--w-ink);}
@media (max-width:980px){
  .m-seq{grid-template-columns:1fr;gap:clamp(28px,3.4vw,44px);}
  .m-seq__copy{position:static;}
  .m-seq__passi{padding-left:clamp(40px,10vw,56px);}
}
@media (prefers-reduced-motion:reduce){
  .m-seq__passi::after{transition:none;transform:scaleY(1);}
  .m-seq__passo{opacity:1;transform:none;transition:none;}
  .m-seq__n{transition:none;background:var(--w-stroke);color:#fff;}
}

/* MOD-N · Carosello a ventaglio delle success stories.
   E' il carosello della homepage, portato dentro il design system il 9/10 su
   richiesta di Andrea: in home esisteva solo come componente di pagina.
   Le carte stanno a ventaglio, quella al centro e' in primo piano, le altre
   ruotano e scalano ai lati. Si naviga a click, a tastiera, in trascinamento.
   Il creative resta interamente visibile: contain sopra una copia sfocata. */
.m-fan{position:relative;height:clamp(460px,46vw,590px);margin-top:18px;overflow:hidden;outline:0;touch-action:pan-y;}
.m-fan__mazzo{position:absolute;inset:0;}
.m-fan__card{--fx:0px;--fy:100px;--fs:.72;--fr:0deg;
  position:absolute;z-index:var(--fz,1);left:50%;bottom:0;
  width:clamp(260px,30vw,400px);height:clamp(330px,37.5vw,500px);margin:0;padding:0;
  translate:-50% 0;border:0;border-radius:40px 40px 0 0;background:#17171a;
  box-shadow:0 34px 80px rgba(0,0,0,.38);cursor:pointer;opacity:0;
  transform:translate3d(var(--fx),var(--fy),0) scale(var(--fs)) rotate(var(--fr));
  transform-origin:center;
  transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .45s ease,box-shadow .6s var(--w-ease);
  will-change:transform,opacity;}
.m-fan.is-pronto .m-fan__card{opacity:var(--fo,1);}
.m-fan__card.is-attiva{box-shadow:0 44px 96px rgba(0,0,0,.46);}
.m-fan__card > a{position:relative;display:flex;flex-direction:column;width:100%;height:100%;
  padding:clamp(20px,2.1vw,28px);overflow:hidden;border-radius:40px 40px 0 0;color:#fff;
  text-decoration:none;isolation:isolate;}
.m-fan__media{position:absolute;z-index:-1;inset:0;overflow:hidden;}
.m-fan__media img,.m-fan__media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;}
.m-fan__media video{opacity:0;transition:opacity .4s var(--w-ease);}
.m-fan__media video.is-playing{opacity:1;}
.m-fan__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;min-height:0;}
.m-fan__kpi{flex:0 0 auto;min-height:0;padding:9px 12px;border-radius:14px 14px 14px var(--w-tail-s);
  background:var(--w-pink);color:#fff;font:800 12px/1 var(--w-sans);letter-spacing:.03em;
  box-shadow:0 8px 22px rgba(253,36,191,.28);}
.m-fan__kpi:empty{display:none;}
.m-fan__logo{display:flex;align-items:center;justify-content:center;}
.m-fan__logo img{width:auto;height:26px;max-width:102px;margin:0;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.96;}
.m-fan__copy{display:flex;flex-direction:column;gap:12px;
  margin:auto calc(clamp(20px,2.1vw,28px) * -1) calc(clamp(20px,2.1vw,28px) * -1);
  padding:22px clamp(20px,2.1vw,28px) 70px;border-radius:24px 24px 0 0;background:rgba(0,0,0,.8);
  backdrop-filter:blur(2px);}
.m-fan__copy p{max-width:34ch;margin:0;font:700 clamp(14px,1.1vw,16.5px)/1.35 var(--w-sans);color:#fff;}
.m-fan__dots{position:absolute;z-index:20;left:50%;bottom:24px;display:flex;align-items:center;gap:8px;
  translate:-50% 0;}
.m-fan__dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.4);
  cursor:pointer;transition:width .3s ease,background .3s ease;}
.m-fan__dot.is-attivo{width:24px;background:#fff;}
/* sulle superfici chiare i pallini vanno in Ink, altrimenti sparirebbero */
.p-section:not(.w-on-radiant):not(.is-dark) .m-fan__dot{background:rgba(11,11,13,.26);}
.p-section:not(.w-on-radiant):not(.is-dark) .m-fan__dot.is-attivo{background:var(--w-ink);}
@media (max-width:700px){
  .m-fan{height:520px;margin-top:10px;}
  .m-fan__card{width:min(76vw,350px);height:min(108vw,460px);border-radius:32px 32px 0 0;}
  .m-fan__card > a{padding:23px;border-radius:32px 32px 0 0;}
  .m-fan__copy{margin:auto -23px -23px;padding:19px 23px 60px;border-radius:20px 20px 0 0;}
  .m-fan__dots{bottom:16px;}
}
@media (prefers-reduced-motion:reduce){.m-fan__card{transition:none;}}

/* MOD-G2 · Hero mono-case: una sola campagna, il progetto al centro.
   Per le pagine case study, al posto della hero testo: il reel gira nel telefono,
   il copy sta a sinistra e i numeri della campagna chiudono in basso.
   Regola data da Andrea il 9/10: una pagina su un singolo progetto mostra quel
   progetto e nient'altro, dentro un telefono quando il formato e' un reel. */
.m-solo{position:relative;overflow:hidden;padding:clamp(140px,10.5vw,172px) var(--w-hero-inset) clamp(44px,4.4vw,68px);
  border-radius:0 0 var(--w-section-radius) var(--w-section-radius);background:var(--w-radiant);color:#fff;}
.m-solo__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;gap:clamp(28px,4vw,72px);}
.m-solo__copy{min-width:0;}
.m-solo__copy .w-display{max-width:17ch;}
.m-solo__copy .w-lead{margin-top:22px;max-width:52ch;}
/* sul Radiant il gradiente del testo non si legge: la parola resta bianca e il
   gradiente passa sotto, come riga. 9/10. */
.m-solo .w-stroke-text{background:none;color:#fff;-webkit-text-fill-color:#fff;
  padding-bottom:.06em;box-shadow:inset 0 -.1em 0 0 var(--w-pink);}
.m-solo__marchio{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(16px,1.6vw,22px);
  padding:8px 14px 8px 10px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);font:800 11.5px/1 var(--w-sans);letter-spacing:.06em;text-transform:uppercase;}
.m-solo__marchio img{width:auto;height:18px;display:block;}
.m-solo__scena{position:relative;min-width:0;justify-self:center;width:min(100%,clamp(240px,24vw,330px));
  animation:m-solo-sale 1.1s cubic-bezier(.16,1,.3,1) both;}
@keyframes m-solo-sale{from{opacity:0;transform:translateY(34px) scale(.96);}to{opacity:1;transform:none;}}
/* l'alone dietro il telefono: stacca il reel dal Radiant senza riquadri */
.m-solo__scena::before{content:"";position:absolute;z-index:0;inset:-14% -22%;border-radius:50%;
  background:radial-gradient(60% 50% at 50% 50%,rgba(255,255,255,.3),transparent 72%);}
.m-solo__scena .m-device{position:relative;z-index:1;}
/* MOD-G2 con una card al posto del telefono: pagine di settore con una sola case,
   dove la creative non e' un reel (per esempio una landing). 11/10. */
.m-solo__scena--card{width:min(100%,clamp(240px,26vw,348px));}
.m-solo__scena--card .w-case-item{width:100%;}
.m-solo__scena--card .w-case__label{margin-top:12px;color:#fff;}
.m-solo__copy .w-actions{margin-top:clamp(26px,2.6vw,34px);}
/* MOD-W Finestra: una landing dentro un browser. Il media sta a larghezza piena e
   altezza automatica, quindi non viene mai tagliato: e' la regola delle creative.
   Nata l'11/10 per Ferrari, vale per ogni case che vive su landing page. */
.m-finestra{position:relative;width:100%;border-radius:clamp(14px,1.3vw,20px);overflow:hidden;
  background:#fff;border:1px solid rgba(11,11,13,.08);
  box-shadow:0 38px 78px -30px rgba(3,5,18,.58),0 10px 24px -14px rgba(3,5,18,.3);}
.m-finestra__barra{display:flex;align-items:center;gap:10px;padding:9px 13px;
  background:linear-gradient(#FAFAFB,#F1F1F4);border-bottom:1px solid rgba(11,11,13,.07);}
.m-finestra__punti{display:flex;gap:6px;flex:none;}
.m-finestra__punti i{width:9px;height:9px;border-radius:50%;background:rgba(11,11,13,.15);}
.m-finestra__url{flex:1;min-width:0;padding:5px 12px;border-radius:999px;background:#fff;
  border:1px solid rgba(11,11,13,.08);font:600 11.5px/1.25 var(--w-sans);color:rgba(11,11,13,.46);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-finestra__schermo{display:block;background:#fff;}
.m-finestra__schermo img{display:block;width:100%;height:auto;}
.m-finestra__didascalia{margin-top:14px;font:600 13.5px/1.4 var(--w-sans);}
.w-on-radiant .m-finestra__didascalia{color:#fff;}

/* MOD-G2 con la finestra: la creative e' orizzontale, quindi la scena prende piu' spazio
   del telefono e il copy ne lascia. */
.m-solo--largo .m-solo__grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.16fr);
  align-items:center;}
.m-solo--largo .m-solo__scena{width:100%;justify-self:stretch;}
.m-solo--largo .m-solo__copy .w-display{max-width:14ch;}
@media (max-width:980px){
  .m-solo--largo .m-solo__grid{grid-template-columns:1fr;}
}
.m-solo__numeri{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--w-gap);margin:clamp(40px,4vw,64px) 0 0;padding:0;list-style:none;}
.m-solo__numeri li{min-width:0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.4);
  animation:m-solo-entra .8s var(--w-ease) both;animation-delay:calc(.35s + var(--i,0) * .11s);}
@keyframes m-solo-entra{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.m-solo__numeri--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.m-solo__numeri strong{display:block;margin-bottom:6px;font:800 clamp(26px,2.5vw,36px)/1 var(--w-sans);letter-spacing:-.04em;}
.m-solo__numeri p{margin:0;font:600 13px/1.35 var(--w-sans);color:rgba(255,255,255,.84);}
@media (max-width:980px){
  .m-solo__grid{grid-template-columns:1fr;}
  .m-solo__scena{order:-1;width:min(100%,clamp(220px,52vw,280px));}
  .m-solo__numeri{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){.m-solo__numeri{grid-template-columns:1fr;gap:14px;}.m-solo__numeri li{padding-top:14px;}}
@media (prefers-reduced-motion:reduce){.m-solo__scena,.m-solo__numeri li{animation:none;}}

.m-htext{padding:clamp(150px,11.5vw,180px) var(--w-hero-inset) clamp(48px,5vw,80px);border-radius:0 0 var(--w-section-radius) var(--w-section-radius);background:var(--w-radiant-light);color:var(--w-ink);}
.m-htext__inner{margin:0;}
.m-htext .w-display{max-width:19ch;}
.m-htext .w-lead{margin-top:24px;max-width:760px;}
.m-htext__points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--w-gap);margin:clamp(40px,4vw,60px) 0 0;padding:0;list-style:none;}
.m-htext__points li{min-width:0;padding:22px 0 0;border-top:1px solid var(--w-ink);}
.m-htext__points strong{display:block;margin-bottom:8px;font:700 17px/1.25 var(--w-sans);overflow-wrap:anywhere;}
.m-htext__points a{display:block;color:inherit;text-decoration:none;}
.m-htext__points a strong span{padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat;transition:background-size .5s var(--w-ease);}
.m-htext__points a:is(:hover,:focus-visible) strong span{background-size:100% 1.5px;}
.m-htext__points a:focus-visible{outline:2px solid var(--w-pink);outline-offset:4px;}
/* Entrata del testo: sale e si mette a fuoco, in sequenza, una volta sola */
.m-htext [data-in]{animation:m-htext-in 1s var(--w-ease) both;animation-delay:calc(var(--i,0) * 110ms + 120ms);}
@keyframes m-htext-in{from{opacity:0;transform:translateY(22px);filter:blur(8px);}to{opacity:1;transform:none;filter:none;}}
@media (max-width:1080px){ .m-htext__points{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .m-htext{padding-top:128px;} .m-htext__points{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .m-htext [data-in]{animation:none;} }

/* H · Conversazione DM Instagram: la meccanica del giveaway mostrata come thread nei messaggi diretti,
   per la hero di /contest-instagram/. Struttura e comportamenti dell'interfaccia DM (barra contatto, bolle,
   quick reply, tre puntini, barra messaggio), colori e coda del design system Webing: nessun asset di marca
   di terzi. La tile ha la stessa altezza della chat compatta, così la griglia bento resta quella disegnata.
   Ogni [data-igdm-step] compare in sequenza, il thread si ancora all'ultimo messaggio. Con reduced motion
   resta tutto visibile e fermo, nessun ciclo. */
.m-tile.m-igdm{display:flex;flex-direction:column;height:clamp(210px,19vw,250px);padding:0;background:#fff;box-shadow:var(--w-card-shadow);}
.m-igdm--demo{width:100%;max-width:300px;margin-inline:auto;}
.m-igdm__bar{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px 9px;border-bottom:1px solid var(--w-line);}
.m-igdm__back svg{display:block;width:8px;height:13px;fill:none;stroke:var(--w-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.m-igdm__ava{flex:none;box-sizing:border-box;width:28px;height:28px;padding:2px;border-radius:50%;background:var(--w-stroke);}
.m-igdm__ava img{display:block;box-sizing:border-box;width:100%;height:100%;padding:4px;border:1.5px solid #fff;border-radius:50%;background:var(--w-ink);}
.m-igdm__who{display:flex;flex-direction:column;min-width:0;}
.m-igdm__who b{font:700 11.5px/1.2 var(--w-sans);color:var(--w-ink);}
.m-igdm__who small{font:500 9.5px/1.2 var(--w-sans);color:var(--w-gray);}
.m-igdm__acts{margin-left:auto;display:flex;color:var(--w-ink);}
.m-igdm__acts svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;}
.m-igdm__thread{position:relative;flex:1;min-height:0;overflow:hidden;}
.m-igdm__thread::before{content:"";position:absolute;z-index:3;top:0;left:0;right:0;height:14px;background:linear-gradient(#fff 25%,rgba(255,255,255,0));pointer-events:none;}
.m-igdm__track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:7px;list-style:none;margin:0;padding:10px 10px 12px;transition:transform .6s var(--w-ease),opacity .3s var(--w-ease);}
.m-igdm.is-rewind .m-igdm__track{opacity:0;}
.m-igdm__step{display:flex;flex-direction:column;gap:5px;opacity:0;transition:opacity .35s var(--w-ease);}
.m-igdm__step.is-on{opacity:1;}
.m-igdm__step:not(.is-typing) .m-igdm__typing{display:none;}
.m-igdm__step.is-typing .m-igdm__bubble,.m-igdm__step.is-typing .m-igdm__qr{display:none;}
.m-igdm__sys{align-self:center;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:11px;background:var(--w-mist);font:700 8.5px/1.2 var(--w-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--w-gray);}
.m-igdm__sys i{flex:none;width:5px;height:5px;border-radius:50%;background:var(--w-pink);}
.m-igdm__check{align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 12px;border:1px dashed var(--w-line);border-radius:13px;background:#fff;text-align:center;}
.m-igdm__check b{font:700 8px/1 var(--w-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--w-gray);}
.m-igdm__check span{font:700 10.5px/1.2 var(--w-sans);color:var(--w-ink);}
.m-igdm__check em{padding:3px 8px;border-radius:9px;background:var(--w-blue);font:700 9px/1.2 var(--w-sans);font-style:normal;color:var(--w-ink);}
.m-igdm__row{display:flex;align-items:flex-end;gap:6px;max-width:90%;}
.m-igdm__row .m-igdm__ava{width:19px;height:19px;padding:1.5px;}
.m-igdm__row .m-igdm__ava img{padding:3px;border-width:1px;}
.m-igdm__stack{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;}
.m-igdm__bubble{padding:8px 11px;border-radius:16px 16px 16px var(--w-tail-s);background:var(--w-mist);font:500 11.5px/1.35 var(--w-sans);color:var(--w-ink);animation:m-igdm-pop .45s var(--w-ease) both;}
.m-igdm__qr{align-self:flex-start;margin-left:25px;padding:6px 12px;border:1px solid var(--w-line);border-radius:14px;background:#fff;font:700 10px/1 var(--w-sans);letter-spacing:.02em;color:var(--w-pink-dark);}
.m-igdm__step.is-tapped .m-igdm__qr{animation:m-igdm-tap .55s var(--w-ease);}
.m-igdm__typing{display:inline-flex;gap:3px;padding:10px 11px;border-radius:16px 16px 16px var(--w-tail-s);background:var(--w-mist);}
.m-igdm__typing i{width:4px;height:4px;border-radius:50%;background:rgba(11,11,13,.38);animation:m-igdm-dot 1s ease-in-out infinite;}
.m-igdm__typing i:nth-child(2){animation-delay:.15s;}
.m-igdm__typing i:nth-child(3){animation-delay:.3s;}
.m-igdm__me{align-self:flex-end;max-width:84%;padding:8px 11px;border-radius:16px 16px var(--w-tail-s) 16px;background:var(--w-stroke);font:600 11.5px/1.35 var(--w-sans);color:#fff;animation:m-igdm-pop .45s var(--w-ease) both;}
.m-igdm__seen{align-self:flex-end;font:600 8.5px/1 var(--w-sans);color:var(--w-gray);}
.m-igdm__input{flex:none;display:flex;align-items:center;gap:7px;padding:8px 12px;border-top:1px solid var(--w-line);}
.m-igdm__cam{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--w-stroke);}
.m-igdm__cam svg{display:block;width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;}
.m-igdm__field{flex:1;min-width:0;padding:5px 10px;border:1px solid var(--w-line);border-radius:13px;font:500 10px/1.4 var(--w-sans);color:var(--w-gray);}
.m-igdm__send{flex:none;font:700 10px/1 var(--w-sans);color:var(--w-pink-dark);}
.m-igdm__note{flex:none;margin:0;padding:0 0 7px;text-align:center;font:600 8px/1 var(--w-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--w-gray);opacity:.65;}
@keyframes m-igdm-pop{from{opacity:0;transform:translateY(6px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes m-igdm-dot{0%,60%,100%{transform:translateY(0);opacity:.38;}30%{transform:translateY(-3px);opacity:1;}}
@keyframes m-igdm-tap{0%{transform:none;box-shadow:0 0 0 0 rgba(253,36,191,.4);}40%{transform:scale(.93);box-shadow:0 0 0 6px rgba(253,36,191,0);}100%{transform:none;box-shadow:0 0 0 0 rgba(253,36,191,0);}}
.m-igdm.is-static{height:auto;}
.m-igdm.is-static .m-igdm__thread{flex:none;overflow:visible;}
.m-igdm.is-static .m-igdm__thread::before{display:none;}
.m-igdm.is-static .m-igdm__track{position:static;transform:none;}
.m-igdm.is-static .m-igdm__step{opacity:1;}
@media (max-width:760px){
  .m-tile.m-igdm{height:clamp(260px,66vw,320px);}
  .m-igdm__bubble,.m-igdm__me{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .m-igdm__track,.m-igdm__step{transition:none;}
  .m-igdm__bubble,.m-igdm__me{animation:none;}
  .m-igdm__typing i{animation:none;}
}

/* Manifesto: una frase su Radiant, momento di marca */
.m-manifesto{position:relative;overflow:hidden;padding:clamp(72px,8vw,128px) var(--w-page-pad);border-radius:var(--w-section-radius);background:var(--w-radiant);color:#fff;text-align:center;}
.m-manifesto .w-kicker{color:#fff;margin-bottom:22px;}
.m-manifesto__quote{max-width:20ch;margin:0 auto;font:800 var(--w-fs-display)/1.02 var(--w-sans);letter-spacing:-.03em;text-wrap:balance;}
.m-manifesto__quote span{display:block;opacity:.62;}
.m-manifesto .w-lead{margin:28px auto 0;color:#fff;font-weight:400;}

/* Scheda persona: avatar con la coda */
.w-person{display:flex;align-items:center;gap:16px;}
.w-person img{width:72px;height:72px;border-radius:50% 50% 50% 14%;object-fit:cover;}
.w-person b{display:block;font:800 18px/1.2 var(--w-sans);}
.w-person span{font:600 14px/1.3 var(--w-sans);color:var(--w-gray);}
.is-dark .w-person span{color:rgba(255,255,255,.62);}

/* Form Webing */
.w-form{display:grid;gap:14px;}
.w-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.w-field{display:grid;gap:7px;font:700 13px/1.2 var(--w-sans);color:var(--w-ink);}
.w-field input,.w-field textarea,.w-field select{width:100%;min-height:52px;padding:14px 16px;border:1px solid rgba(11,11,13,.14);border-radius:var(--w-control-radius) var(--w-control-radius) var(--w-control-radius) var(--w-tail-s);background:#fff;font:400 16px/1.3 var(--w-serif);color:var(--w-ink);transition:border-color .3s var(--w-ease),box-shadow .3s var(--w-ease);}
.w-field textarea{min-height:130px;resize:vertical;}
.w-field input:focus,.w-field textarea:focus,.w-field select:focus{outline:0;border-color:var(--w-ink);box-shadow:0 0 0 3px rgba(253,36,191,.18);}
.w-choice{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;}
.w-choice legend{margin-bottom:10px;font:700 13px/1.2 var(--w-sans);}
.w-choice label{position:relative;cursor:pointer;}
.w-choice input{position:absolute;opacity:0;}
.w-choice span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:13px 13px 13px 4px;background:var(--w-mist);font:700 14px/1 var(--w-sans);transition:background .4s var(--w-ease),color .4s var(--w-ease);}
.w-choice input:checked + span{background:var(--w-ink);color:#fff;}
.w-choice input:focus-visible + span{outline:2px solid var(--w-pink);outline-offset:2px;}
.w-consent{display:flex;align-items:flex-start;gap:10px;font:400 14px/1.45 var(--w-serif);}
.w-consent input{margin-top:3px;accent-color:var(--w-ink);}
.w-consent a{color:inherit;}
.w-form__status{min-height:1.2em;font:600 14px/1.4 var(--w-sans);color:var(--w-pink-dark);}
@media (max-width:760px){ .w-form__row{grid-template-columns:1fr;} }

/* =====================================================================
   MODULO M · ICONE IN SCAMBIO (.m-swap)
   Icone che si danno il cambio dentro lo slot della creative, per le card
   di canale che non hanno una campagna da mostrare. Tre forme:
   base      tre loghi entrano uno alla volta e finiscono in fila
   --tratto  stesse regole con icone di tratto, per il canale web
   --lock    un logo con la scritta: prima l'icona, poi la scritta si scopre
   Tutto in CSS: nessuna immagine, nessuna richiesta in piu', niente JS.
   Le icone sono simboli SVG nella pagina, colorate con currentColor: Ink
   di base, il verde solo su --wa. Nessun alone dietro le icone.
   ===================================================================== */
.m-swap{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:16/10;background:var(--w-radiant-light);color:var(--w-ink);--sw:104px;--tx:calc(var(--sw) * .74);}
.m-swap__i{position:absolute;display:block;width:var(--sw);height:var(--sw);opacity:0;will-change:transform,opacity;}
.m-swap__i svg{display:block;width:100%;height:100%;}
/* Le tre icone si contano fra loro, non fra i figli del contenitore:
   cosi' l'ordine regge anche se davanti a loro compare altro. */
.m-swap__i{animation:swap-a 4.8s infinite;}
.m-swap__i ~ .m-swap__i{animation-name:swap-b;}
.m-swap__i ~ .m-swap__i ~ .m-swap__i{animation-name:swap-c;}

/* Ciclo 4,8s: tre ingressi da soli di 0,9s, poi al secondo 2,5 la terza
   scivola a destra e le altre due escono da dietro di lei. Entrata ed
   uscita hanno due curve diverse, non una sola. */
@keyframes swap-a{
  0%    {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  7.5%  {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  16%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  21%   {opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  21.01%,52%{opacity:0;transform:translateX(0) scale(.3) rotate(-24deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  63.5% {opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.62) rotate(0deg);}
  86.5% {opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.62) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(24deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}
@keyframes swap-b{
  0%,18.7%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  26%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  35%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  40%   {opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  40.01%,52%{opacity:0;transform:translateX(0) scale(.3) rotate(24deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  63.5% {opacity:1;transform:translateX(0) scale(.62) rotate(0deg);}
  86.5% {opacity:1;transform:translateX(0) scale(.62) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(0deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}
/* la terza non esce: e' lei che scivola a destra e apre la fila */
@keyframes swap-c{
  0%,37.5%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  45%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  52%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  63.5% {opacity:1;transform:translateX(var(--tx)) scale(.62) rotate(0deg);}
  86.5% {opacity:1;transform:translateX(var(--tx)) scale(.62) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(-24deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}
/* tre battiti sugli ingressi, poi un alone largo mentre stanno in fila */

/* ---------- --quattro: quattro icone, per i gruppi di canale di Meta ----------
   Stessa meccanica a tre, con un quarto ingresso e la fila su quattro posizioni.
   Serve per Instagram, Facebook, Messenger e WhatsApp insieme. */
.m-swap--quattro{--tx:calc(var(--sw) * .58);}
.m-swap--quattro .m-swap__i{animation-name:swap4-a;}
.m-swap--quattro .m-swap__i ~ .m-swap__i{animation-name:swap4-b;}
.m-swap--quattro .m-swap__i ~ .m-swap__i ~ .m-swap__i{animation-name:swap4-c;}
.m-swap--quattro .m-swap__i ~ .m-swap__i ~ .m-swap__i ~ .m-swap__i{animation-name:swap4-d;}
@keyframes swap4-a{
  0%    {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  6%    {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  13%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  17.5% {opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  17.51%,54%{opacity:0;transform:translateX(0) scale(.3) rotate(-24deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  64%   {opacity:1;transform:translateX(calc(var(--tx) * -3)) scale(.5) rotate(0deg);}
  87%   {opacity:1;transform:translateX(calc(var(--tx) * -3)) scale(.5) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(24deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}
@keyframes swap4-b{
  0%,15%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  21%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  28%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  32.5% {opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  32.51%,54%{opacity:0;transform:translateX(0) scale(.3) rotate(-12deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  64%   {opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.5) rotate(0deg);}
  87%   {opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.5) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(12deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}
@keyframes swap4-c{
  0%,30%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  36%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  43%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  47.5% {opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  47.51%,54%{opacity:0;transform:translateX(0) scale(.3) rotate(12deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  64%   {opacity:1;transform:translateX(var(--tx)) scale(.5) rotate(0deg);}
  87%   {opacity:1;transform:translateX(var(--tx)) scale(.5) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(-12deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}
/* la quarta non esce: e' lei che apre la fila */
@keyframes swap4-d{
  0%,45%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  51%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  56%   {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  64%   {opacity:1;transform:translateX(calc(var(--tx) * 3)) scale(.5) rotate(0deg);}
  87%   {opacity:1;transform:translateX(calc(var(--tx) * 3)) scale(.5) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  96%   {opacity:0;transform:translateX(0) scale(.2) rotate(-24deg);}
  100%  {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);}
}

/* dentro una card informativa l'animazione sta sotto al copy, non al posto della creative.
   La regola «mai due MOD-M in loop nella stessa schermata» resta valida: qui a riposo
   le icone stanno ferme nella fila finale. Quando la griglia entra a schermo partono
   una alla volta, un giro a testa, e poi restano ferme per sempre. Niente ciclo al
   passaggio del mouse: deciso da Andrea il 9/10, un solo giro e basta. */
.w-card .m-swap{margin-top:auto;aspect-ratio:16/7;border-radius:clamp(14px,1.4vw,18px);--sw:clamp(44px,4.6vw,62px);}
.w-card .m-swap--tratto{--sw:clamp(38px,4vw,54px);}
/* 11/10: le fasce si allineano in fondo alla card, cosi' stanno tutte alla stessa
   altezza anche se il testo sopra e' piu' corto o piu' lungo. */
.w-card:has(> .m-swap) .w-card__text{margin-bottom:clamp(16px,1.6vw,22px);}
.w-card .m-swap__i{animation:none;opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.62);}
.w-card .m-swap__i ~ .m-swap__i{transform:scale(.62);}
.w-card .m-swap__i ~ .m-swap__i ~ .m-swap__i{transform:translateX(var(--tx)) scale(.62);}
.w-card .m-swap--quattro .m-swap__i{transform:translateX(calc(var(--tx) * -3)) scale(.5);}
.w-card .m-swap--quattro .m-swap__i ~ .m-swap__i{transform:translateX(calc(var(--tx) * -1)) scale(.5);}
.w-card .m-swap--quattro .m-swap__i ~ .m-swap__i ~ .m-swap__i{transform:translateX(var(--tx)) scale(.5);}
.w-card .m-swap--quattro .m-swap__i ~ .m-swap__i ~ .m-swap__i ~ .m-swap__i{transform:translateX(calc(var(--tx) * 3)) scale(.5);}
/* il giro singolo a cascata quando la griglia arriva a schermo.
   11/10: dentro le card il ciclo si ferma sulla fila e ci resta. Prima girava il
   ciclo intero, uscita compresa: le icone sparivano e ricomparivano, e sembrava una
   seconda animazione. Questi keyframes sono gli stessi tagliati all'86,5% (87% per
   la variante a quattro) e riportati su 100, con la durata accorciata di conseguenza. */
[data-reveal].is-in > .w-card .m-swap__i{animation:swap-fila-a 4.152s 1 both;animation-delay:calc(.25s + var(--i,0) * 1.6s);}
[data-reveal].is-in > .w-card .m-swap__i ~ .m-swap__i{animation-name:swap-fila-b;}
[data-reveal].is-in > .w-card .m-swap__i ~ .m-swap__i ~ .m-swap__i{animation-name:swap-fila-c;}
[data-reveal].is-in > .w-card .m-swap--quattro .m-swap__i{animation-name:swap4-fila-a;animation-duration:4.176s;}
[data-reveal].is-in > .w-card .m-swap--quattro .m-swap__i ~ .m-swap__i{animation-name:swap4-fila-b;}
[data-reveal].is-in > .w-card .m-swap--quattro .m-swap__i ~ .m-swap__i ~ .m-swap__i{animation-name:swap4-fila-c;}
[data-reveal].is-in > .w-card .m-swap--quattro .m-swap__i ~ .m-swap__i ~ .m-swap__i ~ .m-swap__i{animation-name:swap4-fila-d;}

@keyframes swap-fila-a{
  0%    {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  8.67% {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  18.5% {opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  24.28%{opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  24.29%,60.12%{opacity:0;transform:translateX(0) scale(.3) rotate(-24deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.41%,100%{opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.62) rotate(0deg);}
}
@keyframes swap-fila-b{
  0%,21.62%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  30.06%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  40.46%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  46.24%{opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  46.25%,60.12%{opacity:0;transform:translateX(0) scale(.3) rotate(24deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.41%,100%{opacity:1;transform:translateX(0) scale(.62) rotate(0deg);}
}
@keyframes swap-fila-c{
  0%,43.35%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  52.02%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  60.12%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.41%,100%{opacity:1;transform:translateX(var(--tx)) scale(.62) rotate(0deg);}
}
@keyframes swap4-fila-a{
  0%    {opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  6.9%  {opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  14.94%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  20.11%{opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  20.13%,62.07%{opacity:0;transform:translateX(0) scale(.3) rotate(-24deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.56%,100%{opacity:1;transform:translateX(calc(var(--tx) * -3)) scale(.5) rotate(0deg);}
}
@keyframes swap4-fila-b{
  0%,17.24%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  24.14%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  32.18%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  37.36%{opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  37.37%,62.07%{opacity:0;transform:translateX(0) scale(.3) rotate(-12deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.56%,100%{opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.5) rotate(0deg);}
}
@keyframes swap4-fila-c{
  0%,34.48%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  41.38%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  49.43%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  54.6% {opacity:0;transform:translateX(0) scale(.28) rotate(90deg);}
  54.61%,62.07%{opacity:0;transform:translateX(0) scale(.3) rotate(12deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.56%,100%{opacity:1;transform:translateX(var(--tx)) scale(.5) rotate(0deg);}
}
@keyframes swap4-fila-d{
  0%,51.72%{opacity:0;transform:translateX(0) scale(.28) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  58.62%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);}
  64.37%{opacity:1;transform:translateX(0) scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.22,1.15,.36,1);}
  73.56%,100%{opacity:1;transform:translateX(calc(var(--tx) * 3)) scale(.5) rotate(0deg);}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal].is-in > .w-card .m-swap__i{animation:none;}
}

/* le icone di tratto hanno aria dentro il box: vanno un filo piu' grandi
   per pesare come i loghi pieni */
.m-swap--tratto .m-swap__i{width:calc(var(--sw) * 1.2);height:calc(var(--sw) * 1.2);}
.m-swap--tratto{--tx:calc(var(--sw) * .82);}

/* ---------- --lock: icona, poi la scritta ----------
   Il lockup sta in un SVG unico. In apertura il gruppo e' spostato a
   destra di 570,6 unita', cosi' l'icona cade al centro della scena e la
   scritta resta fuori; al secondo 1,1 il gruppo torna a zero e la scritta
   si scopre da sinistra in mezzo secondo.
   Questa variante NON si usa con <symbol> e <use>: il browser clona il
   simbolo in uno shadow tree e le classi del documento non ci arrivano,
   quindi le animazioni non partono. L'SVG va scritto in pagina. */
.m-swap--lock{--lk-w:min(78%,340px);}
.m-swap--lock .m-swap__i{width:var(--lk-w);height:auto;animation:swap-lock 4.8s infinite;}
.m-swap--lock .m-swap__i svg{height:auto;}
.m-swap--lock .lk-g{animation:swap-lock-g 4.8s infinite;}
.m-swap--lock .lk-word{clip-path:inset(0 1086.3px 0 0);animation:swap-lock-wipe 4.8s infinite;}
/* l'alone solo sull'ingresso: dopo, il logo non e' piu' centrato e un
   alone al centro cadrebbe sul vuoto */
@keyframes swap-lock{
  0%   {opacity:0;transform:scale(.42) rotate(-90deg);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  8%   {opacity:1;transform:scale(1.49) rotate(0deg);}
  22%  {opacity:1;transform:scale(1.49) rotate(0deg);animation-timing-function:cubic-bezier(.22,1.08,.36,1);}
  30%  {opacity:1;transform:scale(1) rotate(0deg);}
  84%  {opacity:1;transform:scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.7,0,.84,0);}
  92%  {opacity:0;transform:scale(.9) rotate(0deg);}
  92.01%,100%{opacity:0;transform:scale(.42) rotate(-90deg);}
}
@keyframes swap-lock-g{
  0%,22%{transform:translateX(570.6px);animation-timing-function:cubic-bezier(.22,1.08,.36,1);}
  30%,100%{transform:translateX(0px);}
}
@keyframes swap-lock-wipe{
  0%,28%{clip-path:inset(0 1086.3px 0 0);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  48%,100%{clip-path:inset(0 0px 0 0);}
}

/* =====================================================================
   MODULO N · SCHERMO TELEFONO (.m-phone)
   Il contenitore per mostrare dentro un telefono una pagina o una chat che
   si muove davvero, non uno screenshot. Cambia il contenuto, la scocca resta.

   Scocca: la SVG iPhone 17 PRO in img/, 415x843, schermo 397x831 a x9 y6,
   quindi incasso 2,169% ai lati e 0,712% sopra e sotto. La SVG sta SOTTO al
   contenuto: il suo schermo e' nero pieno e coprirebbe la pagina. Isola, ora
   e icone si ridisegnano sopra, perche' quelle della SVG sono bianche su nero
   e il fondo qui e' chiaro.

   Dentro, il contenuto si scrive in px logici di iPhone (390 di larghezza) e
   lo scala il contenitore con --u: i valori restano quelli veri presi dal
   sito da riprodurre, e resta nitido a qualsiasi larghezza perche' scala
   testo e forme, non pixel.
   ===================================================================== */
.m-phone{position:relative;width:100%;aspect-ratio:415/843;--pu:calc(100% / 415);filter:drop-shadow(0 calc(var(--pu) * 30) calc(var(--pu) * 40) rgba(3,5,18,.2));}
.m-phone__frame{position:absolute;z-index:0;inset:0;background:url('../../img/iPhone 17 PRO Deep Blue.svg') center/contain no-repeat;}
.m-phone__screen{position:absolute;z-index:1;top:.712%;left:2.169%;right:2.169%;bottom:.712%;overflow:hidden;border-radius:13.1% / 6.26%;background:#fff;container-type:size;}
.m-phone__page{--u:calc(100cqw / 390);position:absolute;inset:0;overflow:hidden;font-family:var(--w-sans);-webkit-font-smoothing:antialiased;}
/* barra di stato, ridisegnata sopra al contenuto */
.m-phone__ui{position:absolute;z-index:6;left:0;right:0;top:0;height:calc(var(--u) * 54);pointer-events:none;color:#020817;}
.m-phone__isola{position:absolute;left:50%;top:calc(var(--u) * 11);width:calc(var(--u) * 124);height:calc(var(--u) * 36);transform:translateX(-50%);border-radius:999px;background:#0A0A0C;}
.m-phone__ora{position:absolute;left:calc(var(--u) * 30);top:calc(var(--u) * 18);font:700 calc(var(--u) * 15)/1 var(--w-sans);}
.m-phone__seg{position:absolute;right:calc(var(--u) * 62);top:calc(var(--u) * 20);display:flex;align-items:flex-end;gap:calc(var(--u) * 5);}
.m-phone__seg b{display:block;width:calc(var(--u) * 3);background:currentColor;border-radius:calc(var(--u) * 1);}
.m-phone__seg b:nth-child(1){height:calc(var(--u) * 4);}
.m-phone__seg b:nth-child(2){height:calc(var(--u) * 7);}
.m-phone__seg b:nth-child(3){height:calc(var(--u) * 10);}
.m-phone__seg b:nth-child(4){height:calc(var(--u) * 13);}
.m-phone__bat{position:absolute;right:calc(var(--u) * 28);top:calc(var(--u) * 19);width:calc(var(--u) * 25);height:calc(var(--u) * 12);border:calc(var(--u) * 1.5) solid currentColor;border-radius:calc(var(--u) * 3.5);}
.m-phone__bat::after{content:"";position:absolute;inset:calc(var(--u) * 1.8);background:currentColor;border-radius:calc(var(--u) * 1.6);}
/* su schermata scura la barra di stato va in bianco */
.m-phone__ui--chiaro{color:#fff;}

/* preset WhatsApp: verde di marca su bianco */
.m-swap--wa{background:#fff;color:#25D366;}

/* dove sostituisce la foto di una card articolo lo slot e' gia' 16:10 */
.w-info--article .m-swap{aspect-ratio:auto;height:100%;}
/* Dentro un pannello Split prende il posto della creative, quindi ne prende
   anche la larghezza: il pannello e' place-items:center, non allunga i figli,
   e .m-swap ha solo un aspect-ratio, quindi da solo collasserebbe a zero.
   La superficie ce l'ha gia' il pannello: il modulo non ne porta una seconda. */
.w-split__panel .m-swap{width:min(82%,460px);background:transparent;--sw:clamp(88px,10.5vw,150px);}
/* la fascia finale delle pagine interne usava 110px fissi invece del token di sezione */
.internal-page-shell .final{padding:var(--w-section-pad) var(--w-page-pad);}

/* ===== MOD-M2 . Ventaglio ========================================================
   Deriva da MOD-M e ne prende la curva elastica. Le icone di canale arrivano da
   fuori una dopo l'altra, si fermano intorno al marchio della piattaforma e i fili
   si disegnano verso il centro; poi escono e il giro ricomincia. Dice "tanti canali,
   una piattaforma sola". Forma a fascia larga, per stare sotto il copy di una hero.
   Tutto in CSS: nessuna immagine a parte il marchio, nessun JS, nessuna richiesta.
   Le posizioni dei nodi arrivano dalla pagina con --xn e --yn, in percentuale. */
.m-vent{position:relative;container-type:inline-size;width:100%;aspect-ratio:1000/300;color:var(--w-ink);
  --chip:clamp(46px,5.6vw,72px);--giro:7.5s;--passo:230ms;}
.m-vent__fili{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.m-vent__fili line{stroke:currentColor;stroke-width:.3;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;opacity:0;
  animation:vent-filo var(--giro) infinite both;animation-delay:calc(var(--i) * var(--passo) + 260ms);}
@keyframes vent-filo{
  0%,4%{stroke-dashoffset:60;opacity:0;}
  22%{stroke-dashoffset:0;opacity:.42;}
  86%{stroke-dashoffset:0;opacity:.42;}
  95%,100%{stroke-dashoffset:60;opacity:0;}
}
/* --fx e --fy sono il punto di partenza, piu' in fuori lungo lo stesso raggio */
.m-vent__n{position:absolute;left:calc(var(--xn) * 1%);top:calc(var(--yn) * 1%);
  --fx:calc((var(--xn) - 50) * .62cqw);--fy:calc((var(--yn) - 50) * .205cqw);
  width:var(--chip);height:var(--chip);margin:calc(var(--chip) / -2) 0 0 calc(var(--chip) / -2);
  display:grid;place-items:center;
  border-radius:calc(var(--chip) * .3) calc(var(--chip) * .3) calc(var(--chip) * .3) calc(var(--chip) * .1);
  background:#fff;color:var(--w-ink);box-shadow:0 12px 30px rgba(8,10,55,.2);opacity:0;
  animation:vent-n var(--giro) infinite both;animation-delay:calc(var(--i) * var(--passo));}
.m-vent__n svg{width:56%;height:56%;display:block;}
@keyframes vent-n{
  0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.34) rotate(-70deg);
     animation-timing-function:cubic-bezier(.16,1,.3,1);}
  16%,86%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg);}
  95%,100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.34) rotate(40deg);}
}
.m-vent__cuore{position:absolute;left:50%;top:50%;width:clamp(100px,12.5vw,158px);aspect-ratio:1;
  translate:-50% -50%;display:grid;place-items:center;border-radius:30% 30% 30% 10%;background:#fff;
  box-shadow:0 20px 56px rgba(8,10,55,.32);animation:vent-cuore var(--giro) infinite both;}
.m-vent__cuore img{width:62%;height:auto;display:block;}
@keyframes vent-cuore{
  0%{opacity:0;transform:scale(.84);animation-timing-function:cubic-bezier(.16,1,.3,1);}
  12%,86%{opacity:1;transform:scale(1);}
  95%,100%{opacity:0;transform:scale(.9);}
}
.is-dark .m-vent,.w-on-radiant .m-vent{color:#fff;}
@media (prefers-reduced-motion:reduce){
  .m-vent__n,.m-vent__cuore{animation:none;opacity:1;transform:none;}
  .m-vent__fili line{animation:none;stroke-dashoffset:0;opacity:.42;}
}
@media (max-width:760px){ .m-vent{aspect-ratio:1000/520;--chip:48px;}
  .m-vent__n{--fy:calc((var(--yn) - 50) * .36cqw);} }

/* su fondi scuri o Radiant il blu non tiene: le icone vanno in bianco */
.is-dark .m-swap,.w-on-radiant .m-swap{color:#fff;}
@media (max-width:760px){ .m-swap{--sw:88px;} }
@media (prefers-reduced-motion:reduce){
  .m-swap__i,.m-swap .lk-g,.m-swap .lk-word{animation:none;}
  .m-swap__i{opacity:1;transform:translateX(calc(var(--tx) * -1)) scale(.62);}
  .m-swap__i ~ .m-swap__i{transform:scale(.62);}
  .m-swap__i ~ .m-swap__i ~ .m-swap__i{transform:translateX(var(--tx)) scale(.62);}
  .m-swap--lock .m-swap__i{transform:none;}
  .m-swap--lock .lk-word{clip-path:none;}
}


/* =====================================================================
   TEMPLATE PAGINA
   Due impianti di pagina interi, non blocchi da comporre: si usano
   cosi' come sono e si riempiono di contenuto.
   ART   la pagina di un articolo, testo grande che si accende parola
         per parola mentre scorri, indice a sinistra, demo a destra
   NEWS  l'indice dei contenuti: apertura con le categorie, poi quattro
         fasce (Ultimi, News, Insights, Eventi) che si aprono in pagina
   Il comportamento sta in webing-ui-1-2.js e parte da solo quando
   trova il markup: nessuna chiamata da fare nelle pagine.
   ===================================================================== */

/* ============================== ART ============================== */

/* ================================================================
   TEMPLATE ARTICOLO . prefisso w-art
   Copy grande, colonna stretta, nessuna immagine di copertina.
   Tutto il testo e' nell'HTML al primo byte: le animazioni toccano
   solo colore e opacita', mai il contenuto.
   ================================================================ */
.w-art{--art-measure:45rem;--art-off:rgba(11,11,13,.13);background:#fff;}

/* barra di avanzamento */
.w-art__prog{position:fixed;z-index:60;top:0;left:0;right:0;height:3px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--w-pink),var(--w-blue-deep));transform:scaleX(0);}
@supports (animation-timeline:scroll()){
  .w-art__prog{animation:artProg linear both;animation-timeline:scroll(root block);}
}
@keyframes artProg{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* apertura */
.w-art__top{padding:clamp(136px,12vw,192px) var(--w-page-pad) clamp(44px,4.6vw,72px);}
.w-art__in{max-width:var(--art-measure);margin:0 auto;}
.w-art__h1{width:max-content;max-width:min(46rem,100%);}
/* ritorno all'indice: in cima all'articolo e in fondo, sui correlati */
.w-art__briciole{margin:0 0 clamp(16px,1.6vw,22px);}
.w-art__briciole a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:700 12px/1 var(--w-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--w-gray);
  transition:color .22s var(--w-ease);}
.w-art__briciole a:hover{color:var(--w-ink);}
.w-art__briciole .w-arrow{transition:transform .35s var(--w-ease);}
.w-art__briciole a:hover .w-arrow{transform:translateX(-3px);}
.w-art__briciole a:focus-visible{outline:2px solid var(--w-pink);outline-offset:4px;border-radius:6px;}
.w-art__altriTesta{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(16px,2vw,30px);margin:0 0 var(--w-heading-gap);}
.w-art__altriTesta .w-h3{margin:0;}
/* il rimando a tutti i contenuti sta sotto le card, a sinistra, come
   pulsante nero: e' navigazione, non una CTA commerciale */
.w-art__altriPie{margin-top:clamp(26px,2.8vw,40px);}
.w-art__tuttiLink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:700 14px/1 var(--w-sans);color:var(--w-ink);}
.w-art__tuttiLink .w-arrow{transition:transform .35s var(--w-ease);}
.w-art__tuttiLink:hover .w-arrow{transform:translate(3px,-3px);}
html.ds12 .w-art__tuttiLink:hover .w-link__text{background-size:100% 1.5px;}

.w-art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font:700 12px/1 var(--w-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--w-gray);}
.w-art__meta b{color:var(--w-pink);font-weight:700;}
.w-art__meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;font-style:normal;}
.w-art__h1{margin:clamp(22px,2.4vw,34px) 0 0;font-family:var(--w-sans);font-weight:800;
  font-size:clamp(40px,5.6vw,72px);line-height:1.03;letter-spacing:-.033em;color:var(--w-ink);}
.w-art__h1 span{display:block;}
.w-art__somm{margin:clamp(20px,2.2vw,30px) 0 0;font-family:var(--w-serif);font-weight:300;
  font-size:clamp(21px,1.8vw,27px);line-height:1.42;color:#000;text-wrap:pretty;}
.w-art__firma{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin:clamp(30px,3vw,42px) 0 0;padding-top:20px;border-top:1px solid var(--w-line);}
.w-art__firma p{margin:0;font:400 14px/1.4 var(--w-serif);color:var(--w-gray);}
.w-art__firma b{font-weight:700;color:var(--w-ink);}
.w-art__firmaSh{display:flex;align-items:center;gap:8px;}

/* condivisione: LinkedIn, X e copia indirizzo. La mail la manda la persona,
   noi le mettiamo solo l'indirizzo negli appunti. */
.w-art__sh{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 15px;border:1px solid var(--w-line);border-radius:999px 999px 999px var(--w-tail-s);
  background:#fff;cursor:pointer;font:700 13px/1 var(--w-sans);color:var(--w-ink);text-decoration:none;
  transition:background-color .25s var(--w-ease),border-color .25s var(--w-ease),color .25s var(--w-ease);}
.w-art__sh:hover{background:var(--w-ink);border-color:var(--w-ink);color:#fff;}
.w-art__sh:focus-visible{outline:2px solid var(--w-pink);outline-offset:3px;}
.w-art__sh svg{width:15px;height:15px;flex:0 0 auto;}
.w-art__sh--solo{width:40px;padding:0;}
.w-art__sh.is-fatto{background:var(--w-pink);border-color:var(--w-pink);color:#fff;}
.w-art__share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:clamp(48px,4.8vw,72px);padding-top:26px;border-top:1px solid var(--w-line);}
.w-art .w-art__share > p{margin:0 6px 0 0;font:700 12px/1 var(--w-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--w-gray);}

/* articoli correlati, fuori dalla colonna di lettura */
.w-art__altri{margin:clamp(64px,6.4vw,104px) var(--w-page-pad) 0;
  padding:var(--w-section-pad) var(--w-page-pad);
  border-radius:var(--w-section-radius);background:var(--w-radiant-light);}
.w-art__altriIn{max-width:var(--w-maxw);margin:0 auto;}

@media (max-width:760px){
  .w-art__altri{margin-left:0;margin-right:0;border-radius:var(--w-section-radius) var(--w-section-radius) 0 0;}
}

/* copertina: la stessa immagine che esce nella condivisione social.
   Rapporto bloccato a 1200/628, mai ritagliata: le cover hanno testo
   dentro e un soggetto che tocca i bordi. */
.w-art__cover{margin:0 auto clamp(20px,2vw,30px);padding:0 var(--w-page-pad);
  max-width:calc(var(--art-measure) + var(--w-page-pad) * 2);}
.w-art__cover img{display:block;width:100%;height:auto;aspect-ratio:1200 / 628;object-fit:cover;
  border-radius:clamp(16px,2.4vw,var(--w-card-radius));background:var(--w-mist);}
.w-art__cover figcaption{margin:14px 2px 0;font:400 13px/1.45 var(--w-serif);color:var(--w-gray);}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .w-art__cover img{animation:artCover linear both;animation-timeline:view(block);
    animation-range:cover 0% cover 55%;}
 }
}
@keyframes artCover{from{opacity:.55;transform:scale(1.035);}to{opacity:1;transform:none;}}

/* corpo, copy grande */
.w-art__body{padding:0 var(--w-page-pad) clamp(60px,6vw,96px);}
.w-art__body p,.w-art__body h2,.w-art__body blockquote{margin-bottom:0;}
.w-art__body p{margin-top:clamp(26px,2.4vw,38px);font-family:var(--w-serif);font-weight:300;
  font-size:clamp(21px,1.95vw,28px);line-height:1.48;color:var(--w-ink);text-wrap:pretty;}
.w-art__body p b{font-weight:600;}
.w-art__body h2{margin:clamp(62px,6.4vw,104px) 0 0;font-family:var(--w-sans);font-weight:800;
  font-size:clamp(29px,2.9vw,42px);line-height:1.1;letter-spacing:-.028em;color:var(--w-ink);
  scroll-margin-top:110px;text-wrap:balance;}
.w-art__body h2 + p{margin-top:clamp(20px,1.8vw,26px);}
.w-art__body h3{margin:clamp(44px,4.2vw,64px) 0 0;font-family:var(--w-sans);font-weight:800;
  font-size:clamp(23px,2.05vw,30px);line-height:1.16;letter-spacing:-.022em;color:var(--w-ink);
  scroll-margin-top:110px;text-wrap:balance;}
.w-art__body h4{margin:clamp(32px,3vw,44px) 0 0;font-family:var(--w-sans);font-weight:700;
  font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.012em;color:var(--w-ink);
  scroll-margin-top:110px;}
.w-art__body h3 + p,.w-art__body h4 + p{margin-top:clamp(16px,1.5vw,22px);}

/* liste . stesso font del corpo, il segno viene dal sistema:
   quadrato Radiant per i punti, numero in Jakarta per le sequenze */
.w-art__body ul,.w-art__body ol{margin:clamp(24px,2.2vw,34px) 0 0;padding:0;list-style:none;
  font-family:var(--w-serif);font-weight:300;font-size:clamp(21px,1.95vw,28px);
  line-height:1.48;color:var(--w-ink);}
.w-art__body ol{counter-reset:artNum;}
.w-art__body li{position:relative;margin-top:clamp(13px,1.2vw,18px);padding-left:1.5em;text-wrap:pretty;}
.w-art__body li:first-child{margin-top:0;}
.w-art__body li b{font-weight:600;}
/* goccia pink, vuota: la freccia resta il segno dei link, qui
   confonderebbe */
.w-art__body ul > li::before{content:"";position:absolute;left:.16em;top:.56em;
  width:.4em;height:.4em;border-radius:50% 50% 50% 2px;background:var(--w-pink);}
/* il numero sta nella riga, non sopra: rientro sporgente, cosi' la
   base del numero e' la stessa base della frase */
.w-art__body ol > li{counter-increment:artNum;padding-left:1.9em;text-indent:-1.9em;}
.w-art__body ol > li::before{content:counter(artNum) ".";display:inline-block;width:1.9em;
  text-indent:0;font-family:var(--w-sans);font-weight:700;color:var(--w-ink);}
/* un punto che contiene solo un'altra lista non prende il segno */
.w-art__body li.is-nudo{padding-left:0;text-indent:0;}
.w-art__body li.is-nudo::before{content:none;}
/* liste dentro liste: rientrano e respirano meno */
.w-art__body li > ul,.w-art__body li > ol{margin-top:clamp(10px,1vw,14px);font-size:1em;}
.w-art__body li > ul > li::before{background:var(--w-ink);opacity:.35;}
.w-art__body p + ul,.w-art__body p + ol{margin-top:clamp(20px,1.8vw,26px);}

/* immagini nel corpo . larghe quanto la colonna, mai ritagliate */
.w-art__body p > img,.w-art__body > .w-art__in > img,.w-art__body figure{display:block;
  margin:clamp(40px,4vw,60px) auto 0;}
.w-art__body img{max-width:100%;height:auto;border-radius:var(--w-inner-radius);}
.w-art__body figure img{width:100%;}
.w-art__body figure figcaption{margin-top:14px;font-family:var(--w-sans);font-weight:500;
  font-size:14px;line-height:1.45;color:var(--w-gray);}

/* corsivo: stessa misura del corpo, serve a dare tono non a rimpicciolire */
.w-art__body em,.w-art__body i{font-style:italic;font-size:inherit;color:inherit;}

/* video nel corpo: il riquadro tiene il 16:9 e non fa saltare il layout
   mentre il player carica */
.w-art__body iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;
  margin:clamp(40px,4vw,60px) auto 0;border:0;border-radius:var(--w-inner-radius);
  background:var(--w-mist);}
.w-art__body figure iframe{margin:0;}

/* ---------------- link nel corpo ----------------
   Non blu, non sottolineatura di sistema: il testo resta Ink e sotto
   corre un filo Radiant. Al passaggio il gradiente sale a riempire la
   parola e il testo diventa bianco. Il colore non e' l'unico segnale,
   il filo c'e' sempre. */
.w-art__body a.w-art__link{
  color:var(--w-ink);text-decoration:none;
  padding:.02em .1em .22em;margin:0 -.1em;border-radius:var(--w-tail-s);
  background-image:var(--w-radiant),var(--w-radiant);background-repeat:no-repeat,no-repeat;
  background-size:100% 4px,100% 100%;background-position:0 100%,0 calc(100% + 2em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-position .34s var(--w-ease),color .2s var(--w-ease);}
.w-art__body a.w-art__link:hover{background-position:0 100%,0 100%;color:#fff;}
.w-art__body a.w-art__link:focus-visible{outline:2px solid var(--w-pink);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .w-art__body a.w-art__link{transition:none;}
}

/* frase chiave */
.w-art__q{margin:clamp(52px,5.4vw,84px) 0 0;padding:0;border:0;}
.w-art__q p{margin:0;font-family:var(--w-sans);font-weight:800;
  font-size:clamp(32px,3.8vw,54px);line-height:1.08;letter-spacing:-.03em;color:var(--w-ink);text-wrap:balance;}
.w-art__q + p{margin-top:clamp(44px,4.4vw,66px);}

/* ---------------- INDICE DEI CONTENUTI ----------------
   Uno solo, lo stesso elemento in due vesti: in colonna fissa a
   sinistra sopra i 1320px, dentro il flusso sotto. Testo sempre in
   Ink, mai grigio chiaro. La sezione in cui sei si riconosce dal
   pallino Pink e dal filo che si riempie con il gradiente del sito,
   lo stesso della barra di avanzamento in testa. */
.w-art__idx{margin:0 0 clamp(18px,1.8vw,26px);
  padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px) clamp(14px,1.4vw,18px);
  border:1px solid var(--w-line);
  border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail);
  background:var(--w-mist);}
.w-art .w-art__idxTit{margin:0 0 12px;font:700 11px/1 var(--w-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--w-gray);}
.w-art__idx ol{margin:0;padding:0;list-style:none;counter-reset:idx;
  display:grid;gap:0;}
/* l'indice sta dentro il corpo ma non e' testo di lettura: le regole
   delle liste non devono toccarlo, e per vincerle serve la stessa forza */
.w-art .w-art__idx li{counter-increment:idx;position:relative;
  margin-top:0;padding-left:0;text-indent:0;}
.w-art .w-art__idx li::before{content:none;display:none;}
.w-art__idx a{position:relative;display:flex;gap:11px;padding:7px 0;text-decoration:none;
  font:600 clamp(15px,1.15vw,17px)/1.3 var(--w-sans);color:var(--w-ink);
  transition:color .22s var(--w-ease);}
.w-art__idx a::after{content:counter(idx,decimal-leading-zero);order:-1;flex:0 0 auto;
  font:700 11px/1.5 var(--w-sans);color:var(--w-gray);transition:color .22s var(--w-ease);}
.w-art__idx a:hover{color:var(--w-blue-deep);}
.w-art__idx a:hover::after{color:var(--w-pink);}
.w-art__idx a:focus-visible{outline:2px solid var(--w-pink);outline-offset:3px;border-radius:6px;}
@media (min-width:761px) and (max-width:1319px){
  .w-art__idx ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;}
}

/* sopra i 1320px diventa la colonna fissa a sinistra */
@media (min-width:1320px){
  /* l'indice resta corto: cinque voci e un comando per aprire le altre.
     I 3px di padding a sinistra servono perche' la colonna non tagli il
     primo segno delle lettere. */
  .w-art__idx{position:fixed;left:clamp(26px,3.2vw,56px);top:50%;transform:translateY(-50%);
    z-index:20;width:clamp(188px,15vw,232px);margin:0 0 0 -3px;padding:0 0 0 3px;
    border:0;background:none;
    opacity:0;visibility:hidden;transition:opacity .35s var(--w-ease),visibility .35s;}
  .w-art__idx.is-corto li:nth-child(n+6){display:none;}
  /* aperto per intero su uno schermo basso: allora si', ma solo allora */
  .w-art__idx.is-tutto{max-height:calc(100vh - 168px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--w-line) transparent;}
  .w-art__idx.is-tutto::-webkit-scrollbar{width:3px;}
  .w-art__idx.is-tutto::-webkit-scrollbar-thumb{background:var(--w-line);border-radius:3px;}
  .w-art__idxPiu{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0 20px;
    padding:0;border:0;background:none;cursor:pointer;
    font:700 11px/1 var(--w-sans);letter-spacing:.12em;text-transform:uppercase;
    color:var(--w-gray);transition:color .22s var(--w-ease);}
  .w-art__idxPiu:hover{color:var(--w-ink);}
  .w-art__idxPiu::before{content:"";width:14px;height:2px;border-radius:2px;
    background:var(--w-radiant);transition:width .3s var(--w-ease);}
  .w-art__idxPiu:hover::before{width:20px;}
  .w-art__idxPiu:focus-visible{outline:2px solid var(--w-pink);outline-offset:4px;border-radius:4px;}
  .w-art__idx.is-acceso{opacity:1;visibility:visible;}
  .w-art .w-art__idxTit{margin-bottom:16px;}
  .w-art__idx ol{position:relative;padding-left:20px;}
  /* il filo: binario chiaro e riempimento con il gradiente del sito */
  .w-art__idx ol::before,.w-art__idx ol::after{content:"";position:absolute;left:0;top:6px;width:2px;border-radius:2px;}
  .w-art__idx ol::before{bottom:6px;background:var(--w-line);}
  .w-art__idx ol::after{height:var(--idx-pieno,0px);
    background:linear-gradient(180deg,var(--w-pink),var(--w-blue-deep));
    transition:height .4s var(--w-ease);}
  /* titoli lunghi tagliati a due righe. Lo spazio fra le voci deve essere
     margine e non padding: con il padding la terza riga si vedrebbe
     spuntare sotto il taglio */
  .w-art__idx a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:14px;line-height:1.32;padding:0;margin:9px 0;}
  .w-art__idx a::after{display:none;}
  /* pallino della sezione in cui ti trovi */
  .w-art__idx a::before{content:"";position:absolute;left:-24px;top:50%;margin-top:-4px;
    width:8px;height:8px;border-radius:50%;background:var(--w-pink);
    transform:scale(0);transition:transform .3s var(--w-ease);}
  .w-art__idx a.is-qui{color:var(--w-ink);font-weight:800;}
  .w-art__idx a.is-qui::before{transform:scale(1);}
  .w-art__idx a:not(.is-qui){color:var(--w-ink);opacity:.72;}
  .w-art__idx a:not(.is-qui):hover{opacity:1;color:var(--w-blue-deep);}
}

/* chiusura */
/* ---------------- CHIAMATA ALLA DEMO ----------------
   Lo stesso blocco in due vesti, come l'indice: colonna fissa a destra
   sopra i 1320px, dove c'e' spazio ai lati della colonna di lettura,
   e in fondo all'articolo sotto quella soglia. */
.w-art__fine{margin-top:clamp(64px,6vw,96px);padding:clamp(26px,2.8vw,40px);
  border:1px solid var(--w-line);border-radius:var(--w-card-radius) var(--w-card-radius) var(--w-card-radius) var(--w-tail);
  background:#fff;box-shadow:var(--w-card-shadow);}
.w-art .w-art__fine p{margin:0 0 18px;font-family:var(--w-serif);font-weight:300;
  font-size:18px;line-height:1.5;color:var(--w-ink);}
.w-art .w-art__fine .w-art__fineTit{margin:0 0 14px;font-family:var(--w-sans);font-weight:800;
  font-size:clamp(17px,1.3vw,20px);line-height:1.22;letter-spacing:-.02em;color:var(--w-ink);}

@media (min-width:1320px){
  .w-art__fine{position:fixed;right:clamp(26px,3.2vw,56px);top:50%;transform:translateY(-50%);
    z-index:20;width:clamp(196px,15vw,250px);margin:0;padding:20px 18px 18px;
    border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail);
    opacity:0;visibility:hidden;transition:opacity .35s var(--w-ease),visibility .35s;}
  .w-art__fine.is-acceso{opacity:1;visibility:visible;}
  .w-art .w-art__fine .w-art__fineTit{font-size:16px;margin-bottom:11px;}
  .w-art .w-art__fine p{margin:0 0 16px;font-size:14px;line-height:1.45;}
  /* pulsante in scala ridotta: fumetto da 42 invece che 52 */
  .w-art__fine .w-send{height:auto;min-height:42px;padding-right:12px;font-size:14px;white-space:normal;}
  .w-art__fine .w-send::before{width:42px;border-radius:21px 21px 21px var(--w-tail-s);}
  /* il fumetto deve ancora allargarsi e inghiottire il testo: la regola
     di sistema perdeva contro quella qui sopra, piu' avanti nel foglio */
  .w-art__fine .w-send:hover::before{width:100%;}
  .w-art__fine .w-send__icon{width:42px;height:42px;margin-right:10px;font-size:15px;}
  .w-art__fine .w-send__label{line-height:1.25;}
}

/* ---------------- ART-B . parola per parola ----------------
   Il tempo e' uno solo per tutto il corpo dell'articolo, non uno per
   paragrafo: e' la riga --w-art-corpo. Ogni parola ha la sua finestra
   --a/--b dentro quel tempo, calcolata dal sistema sulla posizione
   vera della parola nella pagina. Cosi' l'ordine e' quello di lettura
   e una parola non puo' accendersi prima di una che sta sopra di lei,
   nemmeno se il paragrafo dopo e' gia' entrato nello schermo. */
.w-art--b .w-art__body w{display:inline;}
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .w-art--b .w-art__body{view-timeline-name:--w-art-corpo;view-timeline-axis:block;}
  .w-art--b .w-art__body w{animation:artParola linear both;animation-timeline:--w-art-corpo;
    animation-range:cover var(--a,40%) cover var(--b,46%);}
  /* il segno del punto elenco e il numero entrano con la loro prima parola */
  .w-art--b .w-art__body li::before{animation:artParola linear both;
    animation-timeline:--w-art-corpo;animation-range:cover var(--a,40%) cover var(--b,46%);}
  /* la sottolineatura del link si disegna mentre le sue parole si accendono */
  .w-art--b .w-art__body a.w-art__link{animation:artFilo linear both;
    animation-timeline:--w-art-corpo;animation-range:cover var(--a,40%) cover var(--b,46%);}
 }
}
@keyframes artParola{from{opacity:0;}to{opacity:1;}}
@keyframes artFilo{from{background-size:0 4px,100% 100%;}to{background-size:100% 4px,100% 100%;}}
/* senza timeline: tutto leggibile, con una comparsa a soglia */
.no-tl .w-art--b .w-art__body w{opacity:0;transition:opacity .45s var(--w-ease);
  transition-delay:calc(var(--i) * .035s);}
.no-tl .w-art--b .is-vista w{opacity:1;}

/* ============== FOOTER FUORI DALLA REVEAL ==============
   Le pagine articolo e l'indice contenuti hanno il footer da solo, non
   dentro la fascia che si scopre. Le regole di colore del footer erano
   scritte solo per quella versione, quindi qui il testo sotto il logo
   restava nero su fondo scuro. Stessi colori, senza dipendere dalla
   reveal. */
.home-card-system footer .foot-desc{color:#a8a8a8;}
.home-card-system footer a{color:#aaa;}
.home-card-system footer a:hover{color:#fff;}
.home-card-system footer h5{color:#fff;}

/* ============================= NEWS ============================== */

/* ================================================================
   NEWS & INSIGHTS . indice (prefisso w-news)
   Apertura con le categorie a sinistra e il titolo a destra, poi
   quattro fasce: Ultimi, News, Insights, Eventi.
   Margine di pagina allineato al logo in testata.
   ================================================================ */
.w-news{--p-marg:var(--site-gutter,clamp(48px,6.875vw,110px));--p-largh:1640px;background:#fff;}
@media (max-width:1080px){ .w-news{--p-marg:38px;} }
.w-news__in{max-width:var(--p-largh);margin:0 auto 0 0;}
.w-news section{padding-left:var(--p-marg);padding-right:var(--p-marg);}

/* ---------- apertura ---------- */
.w-news__hero{position:relative;background:#fff;
  padding-top:clamp(132px,11vw,176px);padding-bottom:clamp(52px,5.2vw,80px);}
.w-news__heroIn{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3.1fr);
  gap:clamp(28px,4vw,80px);align-items:start;max-width:var(--p-largh);margin:0 auto 0 0;}
.w-news__h1{margin:0;font-family:var(--w-sans);font-weight:800;
  font-size:clamp(38px,4.6vw,66px);line-height:1.02;letter-spacing:-.035em;color:var(--w-ink);
  max-width:19ch;text-wrap:balance;}
.w-news__lead{margin:clamp(18px,1.8vw,26px) 0 0;font-family:var(--w-serif);font-weight:300;
  font-size:clamp(18px,1.4vw,22px);line-height:1.45;color:var(--w-ink);max-width:58ch;}

/* categorie */
.w-news__cat{display:grid;gap:2px;padding-top:6px;}
.w-news__cat a{display:flex;align-items:center;gap:12px;padding:9px 0;text-decoration:none;
  font:600 clamp(16px,1.25vw,18px)/1.2 var(--w-sans);color:var(--w-ink);
  transition:color .22s var(--w-ease);}
.w-news__cat svg{width:20px;height:20px;flex:0 0 auto;color:var(--w-gray);transition:color .22s var(--w-ease);}
.w-news__cat a:hover{color:var(--w-blue-deep);}
.w-news__cat a:hover svg{color:var(--w-pink);}
.w-news__cat a:focus-visible{outline:2px solid var(--w-pink);outline-offset:4px;border-radius:8px;}

/* ---------- testa di fascia ---------- */
/* ogni fascia si apre con un filo che parte dal margine di pagina */
.w-news__fascia{padding-top:0;}
.w-news__fascia > .w-news__in{border-top:1px solid var(--w-line);
  padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(8px,1vw,16px);}
.w-news__testa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:clamp(18px,1.8vw,26px);}
.w-news__testa h2{margin:0;font:800 clamp(22px,2vw,30px)/1.15 var(--w-sans);
  letter-spacing:-.025em;color:var(--w-ink);scroll-margin-top:110px;}
.w-news__tutti{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:700 14px/1 var(--w-sans);color:var(--w-ink);}
.w-news__tutti .w-arrow{transition:transform .35s var(--w-ease);}
.w-news__tutti:hover .w-arrow{transform:translate(3px,-3px);}

.w-news__riga4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);}

/* ---------- Ultimi ---------- */
.w-news__u{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--w-line);border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail);
  background:#fff;overflow:hidden;transition:border-color .25s var(--w-ease),box-shadow .35s var(--w-ease);}
.w-news__u:hover{border-color:rgba(11,11,13,.2);box-shadow:var(--w-card-shadow);}
.w-news__u--spicca{border-color:var(--w-pink);}
.w-news__uFoto{overflow:hidden;background:var(--w-mist);}
.w-news__uFoto img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;
  transition:transform 1.1s var(--w-ease);}
.w-news__u:hover .w-news__uFoto img{transform:scale(1.04);}
.w-news__uCopy{display:flex;flex-direction:column;gap:10px;flex:1;
  padding:clamp(16px,1.4vw,20px) clamp(16px,1.4vw,20px) clamp(14px,1.2vw,18px);}
.w-news__uTit{margin:0;font:800 clamp(17px,1.35vw,21px)/1.2 var(--w-sans);letter-spacing:-.022em;
  color:var(--w-ink);text-wrap:pretty;}
.w-news__u .w-news__meta{margin-top:auto;}

/* ---------- meta ---------- */
.w-news__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;
  font:600 12px/1.2 var(--w-mono,var(--w-sans));letter-spacing:.02em;color:var(--w-gray);}
.w-news__meta b{color:var(--w-pink);font-weight:700;}
.w-news__meta i{opacity:.45;font-style:normal;}

/* ---------- News: miniatura quadrata e titolo ---------- */
.w-news__n{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  padding:12px;text-decoration:none;color:inherit;
  border:1px solid var(--w-line);border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail);
  background:#fff;transition:border-color .25s var(--w-ease),box-shadow .35s var(--w-ease);}
.w-news__n:hover{border-color:rgba(11,11,13,.2);box-shadow:var(--w-card-shadow);}
.w-news__nFoto{width:clamp(64px,5.4vw,80px);aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--w-mist);}
.w-news__nFoto img{width:100%;height:100%;object-fit:cover;display:block;}
.w-news__nTit{margin:0 0 6px;font:700 clamp(15px,1.1vw,17px)/1.25 var(--w-sans);letter-spacing:-.018em;color:var(--w-ink);}

/* ---------- Insights ---------- */
.w-news__i{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.w-news__iFoto{overflow:hidden;border-radius:var(--w-inner-radius);background:var(--w-mist);margin-bottom:14px;}
.w-news__iFoto img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;
  transition:transform 1.1s var(--w-ease);}
.w-news__i:hover .w-news__iFoto img{transform:scale(1.04);}
.w-news__iTit{margin:0 0 8px;font:800 clamp(17px,1.3vw,20px)/1.2 var(--w-sans);letter-spacing:-.022em;color:var(--w-ink);}
.w-news__iSom{margin:0 0 10px;font-family:var(--w-serif);font-weight:300;font-size:15px;line-height:1.45;color:var(--w-ink);}

/* ---------- Eventi ---------- */
.w-news__e{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(16px,1.4vw,22px);text-decoration:none;color:inherit;
  border:1px solid var(--w-line);border-radius:var(--w-inner-radius) var(--w-inner-radius) var(--w-inner-radius) var(--w-tail);
  background:var(--w-radiant-light);transition:box-shadow .35s var(--w-ease),transform .35s var(--w-ease);}
.w-news__e:hover{box-shadow:var(--w-card-shadow);transform:translateY(-2px);}
.w-news__eData{display:grid;place-items:center;width:58px;padding:8px 0 10px;border-radius:14px 14px 14px var(--w-tail-s);
  background:var(--w-ink);color:#fff;}
.w-news__eData b{display:block;font:800 22px/1 var(--w-sans);letter-spacing:-.03em;}
.w-news__eData span{display:block;margin-top:3px;font:700 10px/1 var(--w-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.75;}
.w-news__eTit{margin:2px 0 8px;font:800 clamp(16px,1.2vw,19px)/1.22 var(--w-sans);letter-spacing:-.02em;color:var(--w-ink);}

/* ---------- apertura in pagina ----------
   Le voci oltre le prime quattro sono nell'HTML dall'inizio. Le nasconde
   il JavaScript, quindi senza JavaScript la pagina resta completa e
   navigabile. Nel sito vero il pulsante chiede al server la pagina
   successiva: qui la simuliamo con quello che c'e' gia' in pagina. */
html.js .w-news__fascia:not(.is-aperta) .is-oltre{display:none;}
.w-news__fascia.is-aperta .is-oltre{animation:newsSu .45s var(--w-ease) both;
  animation-delay:calc(var(--k,0) * .045s);}
@keyframes newsSu{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .w-news__fascia.is-aperta .is-oltre{animation:none;} }

.w-news__tutti{appearance:none;border:0;background:none;cursor:pointer;padding:0;}
/* nelle fasce con quattro voci o meno il pulsante e' hidden: senza questa
   riga il display della regola sopra lo rimetteva in pagina */
.w-news__tutti[hidden]{display:none;}
.w-news__tutti:focus-visible{outline:2px solid var(--w-pink);outline-offset:4px;border-radius:8px;}
.w-news__tutti .w-arrow{display:inline-block;}
.w-news__fascia.is-aperta .w-news__tutti .w-arrow{transform:rotate(180deg);}
.w-news__fascia.is-aperta .w-news__tutti:hover .w-arrow{transform:rotate(180deg) translate(-3px,-3px);}

/* ---------- coda ---------- */
.w-news__oltre{display:flex;justify-content:center;padding-top:clamp(44px,4.4vw,68px);
  padding-bottom:clamp(60px,6vw,96px);}

@media (max-width:1100px){
  .w-news__riga4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  .w-news__heroIn{grid-template-columns:minmax(0,1fr);gap:26px;}
  .w-news__cat{grid-auto-flow:column;grid-auto-columns:max-content;gap:18px;overflow-x:auto;padding-bottom:4px;}
  .w-news__cat a{padding:6px 0;}
}
@media (max-width:620px){
  .w-news__riga4{grid-template-columns:minmax(0,1fr);}
}