/* Landing temporanea Influeppy — token InflueppyStyle. */
/* Font serviti dal sito (variabili, sottoinsiemi latin e latin-ext di Google Fonts, licenza OFL):
   nessuna richiesta a server esterni prima del primo rendering. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/outfit-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ifp-nero-fisso: #0A0A0B;
  --ifp-bianco-fisso: #FFFFFF;
  --ifp-corallo: #EC6542;
  --ifp-corallo-premuto: #D9532F;
  --ifp-tinta: rgba(236, 101, 66, .10);
  --ifp-su-corallo: var(--ifp-nero-fisso);
  --ifp-carta: #FFFFFF;
  --ifp-notte: #121214;
  --ifp-inchiostro: #0A0A0B;
  --ifp-inchiostro-2: #2A2A2E;
  --ifp-fumo: #626268;
  --ifp-fumo-notte: #A3A3AA;
  --ifp-filo: rgba(10, 10, 11, .10);
  --ifp-filo-forte: rgba(10, 10, 11, .24);
  --ifp-filo-notte: rgba(255, 255, 255, .12);
  --ifp-contorno-campo: #85858B;
  --ifp-negativo-testo: #B3261E;
  --ifp-positivo: #0E8F45;
  --ifp-positivo-testo: #147044;
  --ifp-avviso-testo: #8A4F00;
  --ifp-ombra-overlay: 0 0 0 1px rgba(10, 10, 11, .06), 0 16px 40px rgba(10, 10, 11, .10);

  --ifp-testo: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ifp-display: "Outfit", "Helvetica Neue", sans-serif;

  --ifp-r-control: 10px;
  --ifp-r: 12px;
  --ifp-r-dialog: 14px;
  --ifp-r-pill: 999px;
  --ifp-ease: cubic-bezier(.16, 1, .3, 1);
  --ifp-fast: 160ms;

  --pad: clamp(16px, 4vw, 48px);
  --larghezza: 1280px;
  --sezione: clamp(80px, 11vw, 168px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: transparent; color: var(--ifp-inchiostro); font: 400 18px/1.55 var(--ifp-testo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--ifp-display); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: 0; }
p { margin: 0; }
em { font-style: normal; color: var(--ifp-corallo); }
:focus-visible { outline: 2px solid var(--ifp-corallo); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 16px; z-index: 30; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--ifp-r-control, 10px); background: var(--ifp-carta); box-shadow: var(--ifp-ombra-overlay); }

/* ---------- Nav a pillola con icone 3D su misura (assets/nav, generate per Influeppy) ---------- */
/* overflow-x: clip: il marchio piatto, invisibile finché il logo della hero non vola nella barra,
   resta a destra fuori schermo sui telefoni stretti e allargherebbe la pagina. */
.testata { position: sticky; top: 12px; z-index: 20; padding: 0 var(--pad); margin-top: 12px; overflow-x: clip; }
.barra {
  max-width: 1080px; margin: 0 auto; height: 64px; padding: 0 8px 0 22px;
  display: flex; align-items: center; gap: 16px;
  background: var(--ifp-bianco-fisso); border-radius: var(--ifp-r-pill); box-shadow: var(--ifp-ombra-overlay);
  transition: height 320ms var(--ifp-ease), max-width 320ms var(--ifp-ease);
}
/* La barra prende il colore della sezione che ha sotto (site.js): bianca sul chiaro,
   corallo scuro sui brand, indaco profondo sui creator. Superfici opache, nessun vetro. */
.barra { transition: height 320ms var(--ifp-ease), max-width 320ms var(--ifp-ease), background-color 360ms var(--ifp-ease), box-shadow 360ms var(--ifp-ease); }
.voce, .marchio img { transition: color 360ms var(--ifp-ease), filter 360ms var(--ifp-ease), opacity 360ms var(--ifp-ease); }
.testata[data-tema="corallo"] .barra { background: #D9532F; box-shadow: 0 0 0 1px rgba(10, 10, 11, .14), 0 16px 40px rgba(120, 36, 14, .28); }
.testata[data-tema="corallo"] .voce { color: var(--ifp-nero-fisso); }
.testata[data-tema="corallo"] .indicatore { background: rgba(10, 10, 11, .12); box-shadow: none; }
.testata[data-tema="corallo"] .voce-cta { background-color: var(--ifp-nero-fisso); --fill: var(--ifp-corallo); color: var(--ifp-bianco-fisso); }
.testata[data-tema="indaco"] .barra { background: #2B3780; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px rgba(14, 18, 52, .4); }
.testata[data-tema="indaco"] .voce { color: var(--ifp-bianco-fisso); }
.testata[data-tema="indaco"] .indicatore { background: rgba(255, 255, 255, .14); box-shadow: none; }
.testata[data-tema="indaco"] .voce-cta { color: var(--ifp-su-corallo); }
.testata[data-tema="notte"] .barra { background: #1C1C1F; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 40px rgba(0, 0, 0, .45); }
.testata[data-tema="notte"] .voce { color: #EDEDEF; }
.testata[data-tema="notte"] .indicatore { background: rgba(255, 255, 255, .1); box-shadow: none; }
.testata[data-tema="notte"] { --inverti: 1; }
.testata[data-tema] .marchio img { filter: brightness(0) invert(var(--inverti, 0)); }
.testata[data-tema="indaco"] { --inverti: 1; }
.testata[data-scrolled] .barra { height: 56px; max-width: 1000px; }
.marchio { display: inline-flex; align-items: center; min-height: 44px; }
.marchio img { height: 24px; width: auto; }
/* Il render 3D conserva margini trasparenti sopra e sotto: il box 4:1 li ritaglia
   senza deformare le lettere, mantenendo le misure del marchio originale. */
.marchio img.marchio-3d { width: 96px; object-fit: cover; }
/* Sulle barre colorate la sagoma del 3D fonde lettere ed estrusione: lì compare il marchio vettoriale piatto. */
.marchio { position: relative; }
.marchio img.marchio-piatto, .volo-marchio .marchio img.marchio-piatto { position: absolute; left: 0; top: 50%; height: 20px; width: auto; translate: 0 -50%; transform: none; opacity: 0; pointer-events: none; }
.testata[data-tema] .marchio img.marchio-3d { opacity: 0; }
.testata[data-tema] .marchio img.marchio-piatto { opacity: 1; }
/* Intro del marchio (site.js): parte grande al centro della hero, sopra il titolo, e allo scroll
   vola nel suo posto nella barra. In volo si scompone nel retino dei punti della ü.
   Finché il marchio non arriva, la barra resta compatta attorno alle voci e si allunga per accoglierlo. */
.hero-marchio { display: none; }
.volo-marchio .hero-marchio { display: block; width: min(78vw, 520px); aspect-ratio: 4 / 1; margin: 0 auto clamp(28px, 4vw, 48px); }
.volo-marchio .hero { padding-top: clamp(48px, 7vw, 104px); }
.volo-marchio .marchio { position: relative; width: 96px; flex: none; }
.volo-marchio .voce { white-space: nowrap; }
.volo-marchio .marchio img { position: absolute; left: 0; top: 0; width: auto; max-width: none; height: var(--h-grande, 24px); transform-origin: 0 0; will-change: transform; }
.volo-marchio .marchio img.marchio-3d { width: calc(var(--h-grande, 24px) * 4); }
.volo-marchio .marchio img[data-retino] {
  -webkit-mask-image: radial-gradient(circle, #000 var(--punto), transparent calc(var(--punto) + 1px));
  mask-image: radial-gradient(circle, #000 var(--punto), transparent calc(var(--punto) + 1px));
  -webkit-mask-size: var(--cella) var(--cella); mask-size: var(--cella) var(--cella);
}
@media (max-width: 700px) { .volo-marchio .hero-marchio { width: 50vw; } }
.testata nav { position: relative; margin-left: auto; display: flex; align-items: center; gap: 2px; }
.voce {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 10px;
  border-radius: var(--ifp-r-pill); font-size: 16px; font-weight: 500; text-decoration: none; color: var(--ifp-inchiostro-2);
  transition: color var(--ifp-fast) var(--ifp-ease);
}
.voce img { width: 34px; height: 34px; object-fit: contain; flex: none; margin: -8px 0 -4px; filter: drop-shadow(0 4px 6px rgba(63, 79, 163, .18)); transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.voce:focus-visible, .voce[aria-current="page"] { color: var(--ifp-inchiostro); }
@media (hover: hover) and (pointer: fine) { .voce:hover { color: var(--ifp-inchiostro); } }
.voce:focus-visible img { transform: translateY(-7px) rotate(-10deg) scale(1.22); }
@media (hover: hover) and (pointer: fine) { .voce:hover img { transform: translateY(-7px) rotate(-10deg) scale(1.22); } }
.voce[aria-current="page"] img { transform: translateY(-3px) scale(1.1); }
.indicatore {
  position: absolute; z-index: 0; top: 50%; left: 0; height: 48px; width: 0; translate: 0 -50%;
  border-radius: var(--ifp-r-pill); background: var(--ifp-tinta); box-shadow: inset 0 0 0 1px rgba(236, 101, 66, .28);
  opacity: 0; transition: transform 420ms var(--ifp-ease), width 420ms var(--ifp-ease), opacity 200ms var(--ifp-ease);
}
.indicatore[data-visibile] { opacity: 1; }
.voce-cta { margin-left: 8px; padding: 0 22px 0 12px; background-color: var(--ifp-corallo); color: var(--ifp-su-corallo); font-weight: 600; }
.voce-cta[aria-current="page"] { background-color: var(--ifp-corallo-premuto); }
.voce-cta img { filter: drop-shadow(0 4px 6px rgba(10, 10, 11, .25)); }
.testata .menu { display: none; }

@property --r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
/* Contattaci: pulsante magnetico. Segue il puntatore, si riempie dal punto d'ingresso,
   l'icona esce dal bordo e si inclina, il testo rotola su «Parliamone» e compare la freccia. */
.voce-cta {
  --mx: 0px; --my: 0px; --fx: 50%; --fy: 50%; --rx: 0deg; --ry: 0deg;
  --r: 0%;
  background-image: radial-gradient(circle at var(--fx) var(--fy), var(--ifp-nero-fisso) var(--r), transparent calc(var(--r) + .5px));
  isolation: isolate; overflow: visible; min-height: 52px; margin-left: 12px; padding: 0 22px 0 58px; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 8px 24px rgba(236, 101, 66, .35), inset 0 -2px 0 rgba(10, 10, 11, .12);
  transform: translate(var(--mx), var(--my));
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 260ms var(--ifp-ease), background-color 260ms var(--ifp-ease), --r 560ms var(--ifp-ease);
}
.voce-cta img {
  position: absolute; left: 4px; top: 50%; width: 54px; height: 54px; margin: 0;
  translate: 0 -62%; transform: perspective(300px) rotateX(var(--rx)) rotateY(var(--ry));
  filter: drop-shadow(0 8px 10px rgba(10, 10, 11, .3));
}
.voce-cta:focus-visible img { transform: perspective(300px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) rotate(-14deg) scale(1.18); }
@media (hover: hover) and (pointer: fine) { .voce-cta:hover img { transform: perspective(300px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) rotate(-14deg) scale(1.18); } }
.rullo { position: relative; display: inline-grid; height: 1.2em; overflow: clip; line-height: 1.2; }
.rullo > span { grid-area: 1 / 1; transition: translate 420ms var(--ifp-ease); }
.rullo > span + span { translate: 0 110%; color: var(--ifp-bianco-fisso); }
.cta-freccia { width: 0; height: 18px; opacity: 0; margin-left: -10px; transition: width 320ms var(--ifp-ease), opacity 220ms var(--ifp-ease), margin 320ms var(--ifp-ease), transform 320ms var(--ifp-ease); }
.voce-cta:focus-visible { --r: 160%; background-color: var(--ifp-corallo); color: var(--ifp-bianco-fisso); box-shadow: 0 14px 34px rgba(236, 101, 66, .5), inset 0 -2px 0 rgba(10, 10, 11, .12); }
@media (hover: hover) and (pointer: fine) { .voce-cta:hover { --r: 160%; background-color: var(--ifp-corallo); color: var(--ifp-bianco-fisso); box-shadow: 0 14px 34px rgba(236, 101, 66, .5), inset 0 -2px 0 rgba(10, 10, 11, .12); } }
.voce-cta:focus-visible .rullo > span:first-child { translate: 0 -110%; }
@media (hover: hover) and (pointer: fine) { .voce-cta:hover .rullo > span:first-child { translate: 0 -110%; } }
.voce-cta:focus-visible .rullo > span + span { translate: 0 0; }
@media (hover: hover) and (pointer: fine) { .voce-cta:hover .rullo > span + span { translate: 0 0; } }
.voce-cta:focus-visible .cta-freccia { width: 18px; opacity: 1; margin-left: 0; color: var(--ifp-corallo); }
@media (hover: hover) and (pointer: fine) { .voce-cta:hover .cta-freccia { width: 18px; opacity: 1; margin-left: 0; color: var(--ifp-corallo); } }
.voce-cta:active { transform: translate(var(--mx), var(--my)) scale(.96); }

/* ---------- Bottoni a pillola ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--ifp-r-pill); border: 1px solid transparent;
  font: 600 17px/1 var(--ifp-testo); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--ifp-fast) var(--ifp-ease), border-color var(--ifp-fast) var(--ifp-ease), transform var(--ifp-fast) var(--ifp-ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--ifp-fast) var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) { .btn:hover svg.freccia { transform: translateX(3px); } }
.btn:active { transform: scale(.98); }
.btn-secondario { background-color: var(--ifp-bianco-fisso); color: var(--ifp-inchiostro); border-color: var(--ifp-inchiostro); }

.btn-piccolo { min-height: 44px; padding: 0 20px; font-size: 16px; }
.azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* Pulsante principale «vivo» (site.js): magnetico, si riempie dal punto d'ingresso del puntatore,
   il testo rotola su sé stesso e la freccia, in un tondo, ruota da 45° a dritta. */
.btn-primario {
  --bg: var(--ifp-corallo); --fg: var(--ifp-su-corallo); --fill: var(--ifp-nero-fisso); --fill-fg: var(--ifp-bianco-fisso);
  --chip: var(--ifp-nero-fisso); --chip-fg: var(--ifp-bianco-fisso);
  --r: 0%; --fx: 50%; --fy: 50%; --mx: 0px; --my: 0px;
  min-height: 60px; padding: 0 30px; gap: 14px; font-size: 18px;
  background-color: var(--bg); color: var(--fg);
  background-image: radial-gradient(circle at var(--fx) var(--fy), var(--fill) var(--r), transparent calc(var(--r) + .5px));
  box-shadow: 0 10px 30px rgba(236, 101, 66, .32), inset 0 -2px 0 rgba(10, 10, 11, .14);
  transform: translate(var(--mx), var(--my));
  transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1), color 260ms var(--ifp-ease), box-shadow 260ms var(--ifp-ease), --r 600ms var(--ifp-ease);
}
.btn-primario:has(.freccia) { padding-right: 8px; }
@media (max-width: 420px) { .btn-primario { padding-left: clamp(18px, 6vw, 30px); gap: 10px; font-size: clamp(15px, 4.4vw, 18px); } }
.btn-primario:focus-visible { --r: 160%; background-color: var(--bg); color: var(--fill-fg); box-shadow: 0 16px 40px rgba(236, 101, 66, .45), inset 0 -2px 0 rgba(10, 10, 11, .14); }
@media (hover: hover) and (pointer: fine) { .btn-primario:hover { --r: 160%; background-color: var(--bg); color: var(--fill-fg); box-shadow: 0 16px 40px rgba(236, 101, 66, .45), inset 0 -2px 0 rgba(10, 10, 11, .14); } }
.btn-primario:active { transform: translate(var(--mx), var(--my)) scale(.96); }
.btn-primario svg.freccia {
  width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: var(--chip); color: var(--chip-fg);
  rotate: -45deg; transition: rotate 520ms cubic-bezier(.34, 1.56, .64, 1), background-color 260ms var(--ifp-ease), color 260ms var(--ifp-ease), transform var(--ifp-fast) var(--ifp-ease);
}
.btn-primario:focus-visible svg.freccia { rotate: 0deg; transform: none; background: var(--ifp-corallo); color: var(--ifp-nero-fisso); }
@media (hover: hover) and (pointer: fine) { .btn-primario:hover svg.freccia { rotate: 0deg; transform: none; background: var(--ifp-corallo); color: var(--ifp-nero-fisso); } }
.btn-primario .rullo > span + span { color: inherit; }
.btn-primario:focus-visible .rullo > span:first-child { translate: 0 -110%; }
@media (hover: hover) and (pointer: fine) { .btn-primario:hover .rullo > span:first-child { translate: 0 -110%; } }
.btn-primario:focus-visible .rullo > span + span { translate: 0 0; }
@media (hover: hover) and (pointer: fine) { .btn-primario:hover .rullo > span + span { translate: 0 0; } }
.btn-piccolo.btn-primario { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-piccolo.btn-primario:has(.freccia) { padding-right: 6px; }
.btn-piccolo.btn-primario svg.freccia { width: 36px; height: 36px; padding: 10px; }
/* Sul corallo il pulsante è nero e si riempie di bianco. */
.tunnel .btn-primario, .pannello-corallo .btn {
  --bg: var(--ifp-nero-fisso); --fg: var(--ifp-bianco-fisso); --fill: var(--ifp-bianco-fisso); --fill-fg: var(--ifp-nero-fisso);
  --chip: var(--ifp-corallo); --chip-fg: var(--ifp-nero-fisso);
  box-shadow: 0 12px 30px rgba(120, 36, 14, .35);
}
.tunnel .btn-primario:focus-visible { box-shadow: 0 18px 40px rgba(120, 36, 14, .45); }
@media (hover: hover) and (pointer: fine) { .tunnel .btn-primario:hover { box-shadow: 0 18px 40px rgba(120, 36, 14, .45); } }
.tunnel .btn-primario:focus-visible svg.freccia { background: var(--ifp-nero-fisso); color: var(--ifp-bianco-fisso); }
@media (hover: hover) and (pointer: fine) { .tunnel .btn-primario:hover svg.freccia { background: var(--ifp-nero-fisso); color: var(--ifp-bianco-fisso); } }
/* Sull'indaco e sul buio il riempimento è bianco. */
.piede .btn-primario { --fill: var(--ifp-bianco-fisso); --fill-fg: var(--ifp-nero-fisso); box-shadow: 0 12px 30px rgba(10, 10, 11, .35); }
/* Sull'indaco il pulsante è bianco con testo e tondo indaco (7,6:1) e si riempie di indaco profondo. */
.ribalta .btn-primario {
  --bg: var(--ifp-bianco-fisso); --fg: #3F4FA3; --fill: #1F2766; --fill-fg: var(--ifp-bianco-fisso);
  --chip: #3F4FA3; --chip-fg: var(--ifp-bianco-fisso);
  box-shadow: 0 14px 34px rgba(14, 18, 52, .45);
}
.ribalta .btn-primario:focus-visible { box-shadow: 0 18px 44px rgba(14, 18, 52, .55); }
@media (hover: hover) and (pointer: fine) { .ribalta .btn-primario:hover { box-shadow: 0 18px 44px rgba(14, 18, 52, .55); } }
.ribalta .btn-primario:focus-visible svg.freccia { background: var(--ifp-bianco-fisso); color: #3F4FA3; }
@media (hover: hover) and (pointer: fine) { .ribalta .btn-primario:hover svg.freccia { background: var(--ifp-bianco-fisso); color: #3F4FA3; } }

/* Pulsanti con bordo: stesso riempimento dal puntatore e testo che rotola. */
.btn-secondario, .btn-fantasma {
  --r: 0%; --fx: 50%; --fy: 50%; --mx: 0px; --my: 0px; --fill: var(--ifp-nero-fisso); --fill-fg: var(--ifp-bianco-fisso);
  min-height: 56px; padding: 0 28px; border-width: 1.5px;
  background-image: radial-gradient(circle at var(--fx) var(--fy), var(--fill) var(--r), transparent calc(var(--r) + .5px));
  transform: translate(var(--mx), var(--my));
  transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1), color 260ms var(--ifp-ease), border-color 260ms var(--ifp-ease), --r 600ms var(--ifp-ease);
}
.btn-fantasma { --fill: var(--ifp-bianco-fisso); --fill-fg: var(--ifp-nero-fisso); }
.btn-secondario:focus-visible, .btn-fantasma:focus-visible { --r: 160%; color: var(--fill-fg); border-color: var(--fill); }
@media (hover: hover) and (pointer: fine) { .btn-secondario:hover, .btn-fantasma:hover { --r: 160%; color: var(--fill-fg); border-color: var(--fill); } }
.btn-secondario:focus-visible .rullo > span:first-child, .btn-fantasma:focus-visible .rullo > span:first-child { translate: 0 -110%; }
@media (hover: hover) and (pointer: fine) { .btn-secondario:hover .rullo > span:first-child, .btn-fantasma:hover .rullo > span:first-child { translate: 0 -110%; } }
.btn-secondario:focus-visible .rullo > span + span, .btn-fantasma:focus-visible .rullo > span + span { translate: 0 0; }
@media (hover: hover) and (pointer: fine) { .btn-secondario:hover .rullo > span + span, .btn-fantasma:hover .rullo > span + span { translate: 0 0; } }
.btn-secondario .rullo > span + span, .btn-fantasma .rullo > span + span { color: inherit; }
.btn-piccolo.btn-secondario { min-height: 48px; padding: 0 22px; }

/* Testo piccolo appoggiato sullo sfondo a punti: inchiostro pieno e un alone bianco,
   così i punti non attraversano le lettere. */
body :is(.hero > p, .pagina-intro > p, .muro-testa p, .muro-altri, .piattaforme li, .piattaforme li small) {
  color: var(--ifp-inchiostro-2);
  text-shadow: 0 0 2px #fff, 0 0 8px #fff, 0 0 18px #fff, 0 0 32px rgba(255, 255, 255, .9);
}
.muro-altri span { color: var(--ifp-inchiostro); }

/* ---------- Hero centrata con chip fluttuanti ---------- */
.hero { position: relative; max-width: var(--larghezza); margin: 0 auto; padding: clamp(80px, 12vw, 168px) var(--pad) clamp(48px, 6vw, 80px); text-align: center; }
.distintivo { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid var(--ifp-inchiostro); border-radius: var(--ifp-r-pill); font-size: 15px; font-weight: 500; }
.distintivo b { color: var(--ifp-corallo); font-weight: 600; }
.hero h1 { margin: 0 auto; font-size: clamp(48px, 8vw, 116px); max-width: 12ch; }
.hero > p { margin: 28px auto 0; max-width: 38ch; font-size: clamp(19px, 1.8vw, 22px); color: var(--ifp-fumo); }
.chip {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: var(--ifp-carta); border-radius: var(--ifp-r-dialog); box-shadow: var(--ifp-ombra-overlay);
  text-align: left; font-size: 15px; line-height: 1.3; animation: galleggia 6s ease-in-out infinite;
}
.chip img { width: 44px; height: 44px; }
.chip strong { display: block; font-size: 16px; }
.chip span { color: var(--ifp-fumo); }
.chip-1 { left: 2%; top: 22%; transform: rotate(-6deg); }
.chip-2 { right: 2%; top: 14%; transform: rotate(5deg); animation-delay: -2s; }
.chip-3 { right: 6%; bottom: 4%; transform: rotate(-3deg); animation-delay: -4s; }
.stato { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.stato svg { width: 14px; height: 14px; }
.stato-ok { color: var(--ifp-positivo-testo); background: #D7F5E3; }
.stato-attesa { color: var(--ifp-avviso-testo); background: #FFEBC2; }
@keyframes galleggia { 50% { translate: 0 -8px; } }
/* Sezioni fuori schermo (site.js): le animazioni infinite restano in pausa. */
[data-fermo], [data-fermo] * { animation-play-state: paused !important; }

/* ---------- Showreel: si allarga con lo scroll ---------- */
.showreel { position: relative; height: 170vh; margin-top: clamp(24px, 4vw, 56px); }
.schermo {
  position: sticky; top: 0; height: 100vh; margin: 0; display: grid; place-items: center; overflow: hidden;
  --p: 0;
}
.schermo video {
  /* Il video cresce fino a quasi tutta la finestra ma resta una lastra: bordi netti e arrotondati,
     un filo e un'ombra morbida, mai sfumato nello sfondo. */
  width: calc(100% - 2 * var(--pad) - (1 - var(--p)) * 12vw); max-width: none; height: auto;
  max-height: calc(100vh - 96px - (1 - var(--p)) * 80px);
  aspect-ratio: 16 / 9; object-fit: cover; background: var(--ifp-bianco-fisso);
  border-radius: calc(20px + (1 - var(--p)) * 12px);
  box-shadow: 0 0 0 1px rgba(10, 10, 11, .08), 0 30px 80px rgba(63, 79, 163, .22), 0 12px 30px rgba(10, 10, 11, .08);
  transform: translateY(calc(var(--p) * 28px));
}
/* Con il video a tutto schermo la barra di navigazione si fa da parte; torna sotto il puntatore o con il focus. */
.barra { transition: height 320ms var(--ifp-ease), max-width 320ms var(--ifp-ease), background-color 360ms var(--ifp-ease), box-shadow 360ms var(--ifp-ease), opacity 360ms var(--ifp-ease), transform 420ms var(--ifp-ease); }
.testata[data-cinema] .barra { opacity: .22; transform: translateY(-10px) scale(.96); }
.testata[data-cinema]:focus-within .barra, .testata[data-cinema]:has(nav[data-aperto]) .barra { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .testata[data-cinema]:hover .barra { opacity: 1; transform: none; } }

/* ---------- Sfondo «campo ü» (WebGL, assets/sfondo.js) ---------- */
.campo-pagina { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; background: radial-gradient(60% 50% at 15% 10%, rgba(252, 197, 169, .45), transparent 70%), radial-gradient(50% 50% at 90% 30%, rgba(63, 79, 163, .16), transparent 70%), var(--ifp-carta); }
.campo-notte { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; background: var(--ifp-notte); }

/* Avatar orbitanti nella hero, come nel film */
.orbita { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.avatar { position: absolute; width: var(--d, 72px); height: var(--d, 72px); border-radius: 50%; object-fit: cover; border: 3px solid var(--ifp-bianco-fisso); box-shadow: 0 10px 30px rgba(63, 79, 163, .18); animation: galleggia 7s ease-in-out infinite; }
.a1 { --d: 112px; left: 7%; top: 46%; }
.a2 { --d: 96px; right: 8%; top: 36%; animation-delay: -3s; }
.a3 { --d: 88px; left: 17%; top: 8%; animation-delay: -1.5s; }
.a4 { --d: 80px; right: 20%; top: 4%; animation-delay: -4.5s; }
.a5 { --d: 72px; left: 3%; top: 82%; animation-delay: -2s; }
.a6 { --d: 68px; right: 3%; top: 72%; animation-delay: -5s; }
.a7 { --d: 60px; left: 27%; top: 90%; animation-delay: -6s; }

/* Sezione scura */
.notte { position: relative; isolation: isolate; overflow: hidden; }
.chiusura h2 em { -webkit-text-fill-color: var(--ifp-corallo); }

/* ---------- Tre pannelli a fisarmonica: colori pieni di marca, si allarga quello puntato ---------- */
.pannelli { list-style: none; max-width: var(--larghezza); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--pad) 0; display: flex; gap: 12px; height: min(78vh, 640px); }
.pannello {
  position: relative; isolation: isolate; overflow: visible; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(24px, 3vw, 40px);
  border-radius: 28px; cursor: pointer;
  transition: flex-grow 720ms var(--ifp-ease);
}
.pannello[data-aperto] { flex-grow: 2.6; cursor: default; z-index: 1; }
.pannello-corallo { background: var(--ifp-corallo); color: var(--ifp-nero-fisso); }
.pannello-indaco { background: #3F4FA3; color: var(--ifp-bianco-fisso); }
.pannello-notte { background: var(--ifp-notte); color: #EDEDEF; }
.pannello img {
  position: absolute; z-index: -1; right: -7%; top: -13%; width: min(78%, 420px); height: auto; pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(10, 10, 11, .35));
  transform: rotate(14deg) scale(.72) translate(4%, -6%);
  transition: transform 900ms cubic-bezier(.34, 1.3, .64, 1);
}
.pannello[data-aperto] img { transform: rotate(-6deg) scale(1) translate(0, 0); }
.pannello h2 { font-size: clamp(26px, 2.8vw, 44px); line-height: 1; letter-spacing: -.03em; max-width: 16ch; }
.pannello p, .pannello .btn { opacity: 0; translate: 0 12px; transition: opacity 320ms var(--ifp-ease), translate 420ms var(--ifp-ease); }
.pannello p { font-size: 18px; max-width: 40ch; }
.pannello[data-aperto] p, .pannello[data-aperto] .btn { opacity: 1; translate: 0 0; transition-delay: 260ms; }
.pannello:not([data-aperto]) p { position: absolute; visibility: hidden; }
.pannello .btn { align-self: flex-start; }
.pannello-corallo .btn { background: var(--ifp-nero-fisso); color: var(--ifp-bianco-fisso); }
.pannello-indaco .btn, .pannello-notte .btn { background: var(--ifp-corallo); color: var(--ifp-su-corallo); }
@media (hover: hover) and (pointer: fine) { .pannello .btn:hover svg.freccia { transform: translateX(3px); } }
@media (max-width: 860px) {
  .pannelli { flex-direction: column; height: auto; }
  .pannello { flex: none; min-height: 420px; cursor: default; }
  /* Il microfono esce dal bordo alto ma non da quello destro: oltre lo schermo allargherebbe la pagina. */
  .pannello img { right: 0; transform: rotate(-6deg) scale(.9); width: min(62%, 320px); }
  .pannello p, .pannello .btn { opacity: 1; translate: 0 0; }
  .pannello:not([data-aperto]) p { position: static; visibility: visible; }
}

/* ---------- Titoli giganti + card inclinate ---------- */
.gigante { padding: var(--sezione) var(--pad) 0; text-align: center; }
.gigante > h2 { font-size: clamp(64px, 15vw, 224px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; }
.carte { list-style: none; margin: clamp(-44px, -2.4vw, -18px) auto 0; padding: 0; max-width: 620px; position: relative; display: grid; gap: 0; }
.carte li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; text-align: left;
  padding: 28px 32px; background: var(--ifp-bianco-fisso); color: var(--ifp-nero-fisso);
  border-radius: var(--ifp-r-dialog); box-shadow: var(--ifp-ombra-overlay);
  transition: transform 420ms var(--ifp-ease);
}
.carte li + li { margin-top: -10px; }
.carte li:nth-child(1) { transform: rotate(-3deg); }
.carte li:nth-child(2) { transform: rotate(2deg) translateX(-14px); }
.carte li:nth-child(3) { transform: rotate(-1.5deg) translateX(10px); }
@media (hover: hover) and (pointer: fine) { .carte li:hover { transform: rotate(0) scale(1.02); z-index: 2; } }
.carte img { width: 72px; height: 72px; }
.carte h3 { font-size: clamp(24px, 2.4vw, 32px); text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.carte p { margin-top: 10px; font-size: 17px; color: #2A2A2E; }
.gigante .link-sezione { margin-top: 48px; }
.notte { background: transparent; color: #EDEDEF; margin-top: var(--sezione); padding-bottom: var(--sezione); }
.notte .btn-secondario { background-color: #1C1C1F; color: #EDEDEF; border-color: #EDEDEF; --fill: var(--ifp-bianco-fisso); --fill-fg: var(--ifp-nero-fisso); }


/* ---------- Scene a scorrimento: tunnel (brand) e ribalta (creator) ----------
   Senza JS o con moto ridotto restano impaginate; scene.js aggiunge data-attiva e le anima. */
.scena { position: relative; isolation: isolate; padding: var(--sezione) var(--pad); text-align: center; }
.scena h2 { font-size: clamp(64px, 15vw, 224px); line-height: .86; letter-spacing: -.045em; text-transform: uppercase; }
.scena h3 { font-size: clamp(26px, 3vw, 40px); text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.palco { position: relative; }
/* Brand: fondo corallo, testo nero (6,1:1). Creator: fondo indaco, testo bianco (7,6:1). */
.tunnel { background: var(--ifp-corallo); color: var(--ifp-nero-fisso); overflow: clip; margin-top: var(--sezione); }
/* Dopo il motore niente stacco bianco: il nero si apre in punti corallo dentro il tunnel (sfondo.js). */
.motore + .tunnel { margin-top: 0; }
/* Il bordo si rompe in retino: l'indaco diventa punti che rimpiccioliscono lungo un'onda
   e lasciano affiorare il campo della pagina, come al giunto corallo-indaco.
   La prima riga del retino si sovrappone al pieno, così il confine non mostra fessure. */
.ribalta {
  --sfumo-finale: 168px;
  background: #3F4FA3; color: var(--ifp-bianco-fisso); overflow: clip;
  padding-bottom: calc(var(--sezione) + var(--sfumo-finale));
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--sfumo-finale)) no-repeat,
    url("sfumo-retino.svg") var(--onda-retino, 0px) 100% / 672px 182px repeat-x;
}
/* Dove il browser lo consente l'onda scorre con lo scroll, come il resto della scena. */
@property --onda-retino { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: view()) {
  .ribalta { animation: onda-retino linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes onda-retino { to { --onda-retino: -1344px; } }
}
@media (prefers-reduced-motion: reduce) { .ribalta { animation: none; } }
.tunnel .campo, .ribalta .campo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.tunnel-carte, .sagome, .frasi { list-style: none; margin: 48px auto 0; padding: 0; }
.tunnel-carte, .frasi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; max-width: var(--larghezza); text-align: left; }
.volo { display: grid; gap: 12px; }
.volo img { width: 120px; height: 120px; }
.volo p, .frase p { font-size: 19px; max-width: 34ch; margin-top: 8px; }
.tunnel-fine, .ribalta-fine { margin-top: 40px; }
.sagome { display: flex; justify-content: center; align-items: flex-end; gap: 8px; max-width: var(--larghezza); }
.sagoma { position: relative; flex: 1 1 0; display: grid; justify-items: center; }
.sagoma img { height: clamp(160px, 26vw, 360px); width: auto; }
.frase h3 { font-size: clamp(32px, 4vw, 56px); }

/* Parole in maschera: ogni parola sale da sotto la sua riga (scene.js). */
.parola { display: inline-block; overflow: clip; overflow-clip-margin: .12em; vertical-align: top; padding-bottom: .06em; }
.parola > span { display: inline-block; will-change: transform; }

.scena[data-attiva] { height: 440vh; padding: 0; }
.scena[data-attiva] .palco { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1000px; perspective-origin: 50% 45%; }
.scena[data-attiva] .palco > :not(canvas) { position: absolute; }
.tunnel[data-attiva] .tunnel-titolo { left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; }
.tunnel[data-attiva] .tunnel-carte { inset: 0; margin: 0; display: block; max-width: none; }
.tunnel[data-attiva] .volo { position: absolute; left: 50%; top: 50%; width: min(1100px, 90vw); translate: -50% -50%; justify-items: center; text-align: center; gap: 20px; visibility: hidden; }
.tunnel[data-attiva] .volo[data-in] { visibility: visible; }
.tunnel[data-attiva] .volo img { width: clamp(140px, 18vw, 240px); height: auto; filter: drop-shadow(0 30px 40px rgba(10, 10, 11, .25)); will-change: transform, opacity; }
.tunnel[data-attiva] .volo h3 { font-size: clamp(44px, 8vw, 128px); line-height: .92; letter-spacing: -.04em; }
.tunnel[data-attiva] .volo p { font-size: clamp(18px, 1.6vw, 22px); max-width: 40ch; will-change: opacity, transform; }
.tunnel[data-attiva] .tunnel-fine, .ribalta[data-attiva] .ribalta-fine { left: 50%; bottom: 10vh; translate: -50% 0; margin: 0; opacity: 0; transition: opacity 420ms var(--ifp-ease); }
/* Alla fine della scena brand il pulsante sta al centro dello schermo ed entra crescendo. */
.tunnel[data-attiva] .tunnel-fine { top: 50%; bottom: auto; translate: -50% -50%; scale: .85; transition: opacity 420ms var(--ifp-ease), scale 520ms var(--ifp-ease); }
.tunnel[data-attiva] .tunnel-fine[data-mostra] { scale: 1; }
.tunnel[data-attiva] .tunnel-fine .btn { min-height: 72px; padding-left: 38px; font-size: 21px; }
.tunnel[data-attiva] .tunnel-fine .btn svg.freccia { width: 54px; height: 54px; padding: 15px; }
@media (max-width: 420px) { .tunnel[data-attiva] .tunnel-fine .btn { min-height: 60px; padding-left: clamp(18px, 6vw, 26px); font-size: clamp(15px, 4.4vw, 18px); gap: 10px; } .tunnel[data-attiva] .tunnel-fine .btn svg.freccia { width: 44px; height: 44px; padding: 12px; } }
.scena .tunnel-fine[data-mostra], .scena .ribalta-fine[data-mostra] { opacity: 1; }
.ribalta[data-attiva] .ribalta-titolo { inset: 6vh 0 auto; margin: 0; will-change: transform, opacity; }
.ribalta[data-attiva] .sagome { left: 0; right: 0; bottom: -2vh; height: 92vh; margin: 0; max-width: none; display: block; transform-style: preserve-3d; transform-origin: 50% 100%; will-change: transform; }
.ribalta[data-attiva] .sagoma { position: absolute; bottom: 0; left: 50%; display: block; transform-origin: 50% 100%; will-change: transform, opacity, filter; }
.ribalta[data-attiva] .sagoma img { height: var(--h, 70vh); width: auto; max-width: none; filter: blur(var(--nebbia, 0px)) drop-shadow(0 24px 30px rgba(10, 10, 11, var(--ombra, .35))); }

/* ---------- Motore: fondo notte. Senza JS o con moto ridotto è impaginato in colonna, con la
   mappa ferma; scene.js aggiunge data-attiva e la scena si anima allo scroll. */
.motore { background: var(--ifp-notte); color: #EDEDEF; overflow: clip; margin-top: var(--sezione); }
.motore-apertura h2 { font-size: clamp(44px, 9.4vw, 156px); line-height: .9; }
.motore-apertura h2 em { color: var(--ifp-corallo); }
.motore-apertura p { max-width: 50ch; margin: 28px auto 0; color: var(--ifp-fumo-notte); font-size: clamp(17px, 1.5vw, 21px); }
.motore-mappa { display: block; width: min(100%, 1000px); aspect-ratio: 700 / 432; margin: 56px auto 0; }
.motore .oggetto, .motore-conta { display: none; }
.motore-fasi { list-style: none; max-width: var(--larghezza); margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; text-align: left; }
.motore .fase h3 { font-size: clamp(28px, 3.4vw, 52px); line-height: .95; letter-spacing: -.035em; }
.motore .fase p { margin-top: 12px; max-width: 42ch; color: var(--ifp-fumo-notte); font-size: clamp(16px, 1.4vw, 19px); }
.motore[data-attiva] .motore-mappa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
.motore[data-attiva] .motore-apertura { left: 0; right: 0; top: 50%; translate: 0 -50%; padding: 0 var(--pad); }
.motore[data-attiva] .oggetto { display: block; left: 0; top: 0; height: auto; opacity: 0; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .5)); will-change: transform, opacity; }
.motore[data-attiva] .motore-conta {
  display: block; right: var(--pad); bottom: 7vh; margin: 0; opacity: 0; white-space: nowrap;
  color: var(--ifp-fumo-notte); font: 500 clamp(14px, 1.3vw, 18px)/1 var(--ifp-testo); letter-spacing: .02em;
}
.motore-conta b { display: inline-block; min-width: 2.2ch; margin: 0 4px 0 12px; color: var(--ifp-bianco-fisso); font: 600 1.9em/1 var(--ifp-display); font-variant-numeric: tabular-nums; text-align: right; }
.motore-conta b:first-child { margin-left: 0; min-width: 3.2ch; color: var(--ifp-corallo); }
.motore[data-attiva] .motore-fasi { left: var(--pad); right: var(--pad); bottom: 7vh; margin: 0; display: block; max-width: none; }
.motore[data-attiva] .fase { position: absolute; left: 0; bottom: 0; width: min(560px, 100%); visibility: hidden; }
.motore[data-attiva] .fase[data-in] { visibility: visible; }
.motore[data-attiva] .fase p { will-change: opacity, transform; }
@media (max-width: 760px) {
  .motore[data-attiva] .motore-fasi { bottom: 5vh; }
  .motore[data-attiva] .motore-conta { right: auto; left: var(--pad); bottom: auto; top: 13vh; }
  .motore[data-attiva] .fase h3 { font-size: clamp(28px, 8.4vw, 40px); }
}
.ribalta[data-attiva] .frasi { left: var(--pad); top: 30vh; width: min(520px, 42vw); margin: 0; display: block; z-index: 2; }
.ribalta[data-attiva] .frase { position: absolute; inset: 0 auto auto 0; width: 100%; visibility: hidden; text-shadow: 0 2px 24px rgba(20, 26, 70, .55); }
.ribalta[data-attiva] .frase[data-in] { visibility: visible; }
.ribalta[data-attiva] .frase h3 { font-size: clamp(48px, 6vw, 96px); line-height: .92; letter-spacing: -.04em; }
.ribalta[data-attiva] .frase p { font-size: clamp(18px, 1.5vw, 21px); color: rgba(255, 255, 255, .92); }
.ribalta[data-attiva] .ribalta-fine { left: var(--pad); bottom: auto; top: calc(30vh + 300px); translate: 0 0; z-index: 2; }
@media (max-width: 760px) {
  .ribalta[data-attiva] .frasi { left: var(--pad); right: var(--pad); top: 24vh; width: auto; }
  .ribalta[data-attiva] .sagome { height: 62vh; bottom: 0; }
  .ribalta[data-attiva] .ribalta-fine { left: 50%; top: auto; bottom: calc(var(--sfumo-finale) + 24px); translate: -50% 0; z-index: 3; }
  .ribalta[data-attiva] .frase h3 { font-size: 44px; }
}

/* ---------- Muro dei brand: tre nastri infiniti in versi opposti che accelerano con lo scroll
   (e si invertono risalendo), si trascinano col dito e si fermano sotto il puntatore o il focus;
   tessere nel colore del brand, focus sul nome puntato ---------- */
.brand-muro { padding: var(--sezione) 0 0; overflow: clip; }
.muro-testa { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.muro-testa h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: .95; letter-spacing: -.04em; }
.muro-numero { display: inline-block; min-width: 2ch; color: var(--ifp-corallo); font-variant-numeric: tabular-nums; }
.muro-testa p { color: var(--ifp-inchiostro-2); font-size: 19px; max-width: 36ch; }
.muro { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(6px, 1vw, 14px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fila { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); width: max-content; justify-self: center; }
/* Nastro attivo (site.js): le copie dei loghi seguono gli originali, il verso orizzontale va al
   trascinamento e quello verticale resta allo scroll della pagina. */
.muro[data-nastro] { padding: 18px 0; }
.muro[data-nastro] .fila { justify-self: start; gap: 0; will-change: transform; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.muro[data-nastro] .logo { margin-right: clamp(14px, 2vw, 28px); }
.muro[data-nastro] :is(a, img) { -webkit-user-drag: none; }
.muro[data-trascina] .fila { cursor: grabbing; }
.muro-comandi { max-width: var(--larghezza); margin: 8px auto 0; padding: 0 var(--pad); display: flex; justify-content: flex-end; }
.muro-pausa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ifp-filo); border-radius: 999px; background: var(--ifp-bianco-fisso); color: var(--ifp-inchiostro-2); font: 500 14px/1 var(--ifp-display); cursor: pointer; transition: border-color 200ms var(--ifp-ease), color 200ms var(--ifp-ease); }
.muro-pausa:hover { border-color: var(--ifp-filo-forte); color: var(--ifp-inchiostro); }
.muro-pausa:focus-visible { outline: 3px solid var(--ifp-inchiostro); outline-offset: 3px; }
.muro-pausa svg { width: 14px; height: 14px; }
.muro-pausa[aria-pressed="true"] .icona-pausa, .muro-pausa:not([aria-pressed="true"]) .icona-avvia { display: none; }
/* Tessere logo: altezza secondo il numero di collaborazioni. Il muro alterna tessere bianche
   e tessere nel colore pieno del brand (--marca, data-pieno). Al passaggio il colore del brand
   si allarga dal punto in cui entra il puntatore (--px, --py da site.js) e il logo diventa
   bianco o nero secondo data-su; i loghi a più colori restano com'è, su una tinta leggera. */
.logo { --marca: var(--ifp-nero-fisso); --su-marca: var(--ifp-nero-fisso); --logo-su-marca: none; --inclina: -1.5deg; --attesa: 160ms; position: relative; isolation: isolate; display: grid; place-items: center; height: clamp(84px, 9vw, 128px); border-radius: 22px; background: var(--ifp-bianco-fisso); box-shadow: 0 0 0 1px var(--ifp-filo); transition: box-shadow 420ms var(--ifp-ease), scale 520ms var(--ifp-ease), translate 520ms var(--ifp-ease), rotate 520ms var(--ifp-ease), opacity 320ms var(--ifp-ease) var(--attesa); }
.fila .logo:nth-child(even) { --inclina: 1.5deg; }
.logo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--marca) 14%, var(--ifp-bianco-fisso)); clip-path: circle(0% at var(--px, 50%) var(--py, 50%)); transition: clip-path 560ms var(--ifp-ease); }
.logo-mono::before { background: var(--marca); }
.logo[data-su="bianco"] { --su-marca: var(--ifp-bianco-fisso); --logo-su-marca: brightness(0) invert(1); }
.logo[data-su="nero"] { --logo-su-marca: brightness(0); }
.logo > a { display: grid; place-items: center; height: 100%; padding: 0 clamp(22px, 2.6vw, 40px); border-radius: inherit; }
.logo > a:focus-visible { outline: 3px solid var(--ifp-inchiostro); outline-offset: 4px; }
/* Freccia d'uscita: il link apre il sito del brand. */
.logo > a::after { content: "↗"; position: absolute; top: 10px; right: 14px; font: 600 18px/1 var(--ifp-display); color: var(--su-marca); opacity: 0; translate: -6px 6px; transition: opacity 260ms var(--ifp-ease), translate 420ms var(--ifp-ease); }
.logo img { display: block; height: calc(var(--h) * 1px); width: auto; max-width: clamp(140px, 15vw, 230px); object-fit: contain; transition: filter 200ms var(--ifp-ease) 80ms, opacity 320ms var(--ifp-ease), scale 520ms var(--ifp-ease); }
.logo[data-peso="1"] { --h: 40; } .logo[data-peso="2"] { --h: 52; } .logo[data-peso="3"] { --h: 64; }
.logo-mono img { filter: brightness(0); opacity: .86; }
.logo[data-pieno] { box-shadow: none; }
.logo[data-pieno]::before { clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); }
.logo[data-pieno] img { filter: var(--logo-su-marca); opacity: 1; }
.logo:has(> a:focus-visible)::before { clip-path: circle(150% at 50% 50%); }
.logo:has(> a:focus-visible) img { filter: var(--logo-su-marca); opacity: 1; }
.logo:has(> a:focus-visible) > a::after { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) {
  .logo:hover { --attesa: 0ms; z-index: 1; scale: 1.07; translate: 0 -8px; rotate: var(--inclina); box-shadow: 0 0 0 1px transparent, 0 26px 48px -14px color-mix(in srgb, var(--marca) 60%, transparent); }
  .logo:hover::before { clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); }
  .logo:hover img { filter: var(--logo-su-marca); opacity: 1; scale: 1.05; }
  .logo:hover > a::after { opacity: 1; translate: 0 0; }
  /* Il resto del muro si attenua subito e si riaccende con un attimo di ritardo,
     così attraversare lo spazio tra due tessere non fa lampeggiare il muro. */
  .muro:has(.logo:hover) .logo:not(:hover) { --attesa: 0ms; opacity: .42; }
}
.muro-altri { max-width: 900px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 var(--pad); text-align: center; color: var(--ifp-fumo); font-size: 17px; line-height: 1.7; }
.muro-altri span { color: var(--ifp-inchiostro); font-weight: 600; }
@media (max-width: 860px) { .muro-testa { grid-template-columns: 1fr; gap: 16px; } }
/* Sul telefono, senza il nastro (niente JS), le righe ferme mostrerebbero un logo o due: il muro
   diventa una striscia da scorrere col dito, con le righe allineate all'inizio. */
@media (max-width: 760px) {
  .muro:not([data-nastro]) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; justify-items: start; padding: 16px var(--pad); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .muro::-webkit-scrollbar { display: none; }
  .muro:not([data-nastro]) .fila { justify-self: start; }
  .muro[data-nastro] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .fila { width: auto; flex-wrap: wrap; padding: 0 var(--pad); } .muro { -webkit-mask-image: none; mask-image: none; } .logo:hover { scale: 1; translate: 0 0; rotate: 0deg; } .logo:hover img { scale: 1; } }

/* ---------- Persone che sostengono Influeppy ---------- */
/* Investitori: scena notte a tutta larghezza, come «Per i brand» e «Per i creator». */
.supporto { overflow: clip; margin-top: var(--sezione); background: var(--ifp-notte); color: var(--ifp-bianco-fisso); scroll-margin-top: 0; }
.supporto .campo-notte { position: absolute; inset: 0; z-index: -1; }
.supporto h2 em { color: var(--ifp-corallo); font-style: normal; }
.supporto-intro { max-width: 46ch; margin: 36px auto 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: #D4D4D8; }
.supporto-aziende { max-width: var(--larghezza); margin: clamp(72px, 9vw, 128px) auto 0; }
.supporto-aziende figcaption { color: var(--ifp-fumo-notte); font-size: 14px; font-weight: 600; }
.supporto-aziende ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 28px 0 0; padding: 0; border-block: 1px solid var(--ifp-filo-notte); }
.supporto-aziende li { display: grid; height: clamp(104px, 11vw, 152px); }
.supporto-aziende a { display: grid; place-items: center; padding: 0 24px; transition: background-color 320ms var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) { .supporto-aziende a:hover { background: rgba(255, 255, 255, .04); } }
.supporto-aziende a:focus-visible { outline-offset: -4px; }
.supporto-aziende li + li { border-left: 1px solid var(--ifp-filo-notte); }
.supporto-aziende img { width: auto; max-width: 100%; height: auto; max-height: 36px; opacity: .88; transition: opacity 320ms var(--ifp-ease), scale 420ms var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) { .supporto-aziende li:hover img { opacity: 1; scale: 1.06; } }
.supporto-aziende img[src*="apple"] { max-height: 44px; }
.supporto-aziende img[src*="procter"] { max-height: 64px; }
.supporto-aziende img[src*="compass"] { max-height: 22px; }
.supporto-persone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--larghezza); list-style: none; margin: 0 auto; padding: 0; text-align: left; border-bottom: 1px solid var(--ifp-filo-notte); }
.supporto-persone > li + li { border-left: 1px solid var(--ifp-filo-notte); }
.sostenitore { display: flex; flex-direction: column; height: 100%; padding: clamp(32px, 4.5vw, 64px); }
/* Ritratto a mezzo busto: un arco di colore sale dal basso e la persona emerge da dentro,
   con la testa che supera il bordo superiore. Il puntatore sposta appena la figura.
   Arco = calotta (cerchio) + corpo (rettangolo); la maschera aggiunge la fascia dove esce la testa. */
@property --disco { syntax: "<number>"; inherits: false; initial-value: 0; }
.ritratto {
  --tinta-disco: #3F4FA3; --l: 264px; --a: 330px; --cima: 52px;
  --arco: calc(var(--l) / 2);
  --top: calc(var(--a) - (var(--a) - var(--cima)) * var(--disco));
  --calotta: radial-gradient(circle var(--arco) at 50% calc(var(--top) + var(--arco)), #000 calc(100% - .5px), transparent 100%);
  --corpo: linear-gradient(#000 0 0) 50% 100% / 100% max(0px, calc(var(--a) - var(--top) - var(--arco))) no-repeat;
  width: var(--l); height: var(--a);
  object-fit: cover; object-position: 50% 0%;
  background:
    radial-gradient(circle var(--arco) at 50% calc(var(--top) + var(--arco)), var(--tinta-disco) calc(100% - .5px), transparent 100%),
    linear-gradient(var(--tinta-disco) 0 0) 50% 100% / 100% max(0px, calc(var(--a) - var(--top) - var(--arco))) no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc((var(--cima) + var(--arco) * .5) * var(--disco)) no-repeat, var(--calotta), var(--corpo);
  border-radius: 0 0 var(--ifp-r-dialog) var(--ifp-r-dialog);
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px);
  transition: --disco 520ms var(--ifp-ease), translate 900ms var(--ifp-ease), object-position 520ms var(--ifp-ease);
}
.ritratto-corallo { --tinta-disco: var(--ifp-corallo); }
.supporto-persone [data-visibile] .ritratto {
  --disco: 1; object-position: 50% 100%;
  transition: --disco 1000ms var(--ifp-ease) 160ms, object-position 1100ms var(--ifp-ease) 420ms, translate 900ms var(--ifp-ease);
}
.supporto-persone > li + li[data-visibile] .ritratto { transition-delay: 320ms, 580ms, 0ms; }
@media (hover: hover) and (pointer: fine) {
  .supporto-persone [data-visibile] .sostenitore:hover .ritratto { --disco: 1.05; transition: --disco 1000ms cubic-bezier(.34, 1.4, .64, 1), object-position 1100ms var(--ifp-ease), translate 900ms var(--ifp-ease); }
}
.supporto .sostenitore h3 { margin-top: 28px; font-size: clamp(36px, 4.4vw, 64px); }
.sostenitore-ruolo { margin-top: 12px; color: var(--ifp-corallo); font-size: 15px; font-weight: 600; }
.sostenitore > p:not(.sostenitore-ruolo) { margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.6; color: #D4D4D8; }
.supporto-fonte { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; padding-top: 24px; align-self: flex-start; color: var(--ifp-bianco-fisso); font-size: 16px; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .supporto-fonte:hover { color: var(--ifp-corallo); text-decoration-thickness: 2px; } }
.supporto-fonte span, .supporto-piede .btn span { transition: translate 240ms var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) { .supporto-fonte:hover span, .supporto-piede .btn:hover span { translate: 2px -2px; } }
.supporto-piede { margin-top: 56px; }
.supporto :focus-visible { outline: 2px solid var(--ifp-corallo); outline-offset: 4px; }
/* Tablet: tre loghi sopra e due centrati sotto, invece di una cella vuota a destra. */
@media (max-width: 900px) { .supporto-aziende ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } .supporto-aziende li { grid-column: span 2; } .supporto-aziende li:nth-child(4) { grid-column: 2 / span 2; border-left: 0; } .supporto-aziende li:nth-child(n+4) { border-top: 1px solid var(--ifp-filo-notte); } }
@media (max-width: 700px) {
  .supporto-aziende ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supporto-aziende li:nth-child(n) { grid-column: auto; border-left: 0; border-top: 0; }
  .supporto-aziende li:nth-child(even) { border-left: 1px solid var(--ifp-filo-notte); }
  .supporto-aziende li:nth-child(n+3) { border-top: 1px solid var(--ifp-filo-notte); }
  .supporto-aziende li:last-child { grid-column: 1 / -1; border-left: 0; }
  .supporto-persone { grid-template-columns: 1fr; }
  .supporto-persone > li + li { border-left: 0; border-top: 1px solid var(--ifp-filo-notte); }
  .sostenitore { padding: 40px 0; }
  .ritratto { --l: 216px; --a: 270px; --cima: 42px; }
}
@media (prefers-reduced-motion: reduce) { @media (hover: hover) and (pointer: fine) { .supporto-aziende li:hover img { scale: 1; } } }

/* ---------- Piattaforme ---------- */
.piattaforme { max-width: var(--larghezza); margin: 0 auto; padding: var(--sezione) var(--pad) 0; text-align: center; }
.piattaforme h2 { font-size: clamp(32px, 4vw, 52px); }
/* Sette piattaforme su una sola fila, celle uguali, icone ferme e nomi sulla stessa linea.
   Sul telefono quattro sopra e tre centrate sotto. */
.piattaforme ul { --colonne: 7; --spazio: clamp(12px, 2vw, 28px); list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px var(--spazio); max-width: 1100px; margin: 48px auto 0; padding: 0; }
.piattaforme li { flex: 0 0 calc((100% - (var(--colonne) - 1) * var(--spazio)) / var(--colonne)); display: grid; justify-items: center; align-content: start; gap: 14px; font: 600 clamp(15px, 1.5vw, 19px)/1.2 var(--ifp-display); }
.piattaforme img { width: min(100%, 132px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 16px 22px rgba(10, 10, 11, .14)); }
@media (max-width: 760px) { .piattaforme ul { --colonne: 4; gap: 24px var(--spazio); } .piattaforme li { min-width: 0; font-size: clamp(13px, 3.9vw, 15px); } }

/* ---------- Chiusura: la domanda a sinistra, quattro obiettivi a destra ----------
   Ogni obiettivo apre il modulo contatti già impostato su quella scelta (site.js).
   Al passaggio il colore di marca entra dall'angolo della freccia. */
.chiusura { position: relative; max-width: var(--larghezza); margin: 0 auto; padding: var(--sezione) var(--pad); text-align: center; }
.chiusura h2 { position: relative; z-index: 1; font-size: clamp(40px, 6.6vw, 96px); line-height: .95; text-transform: uppercase; letter-spacing: -.035em; max-width: 15ch; margin: 0 auto; }
.chiusura-obiettivi {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "testa obiettivi" "altro obiettivi";
  grid-template-rows: auto 1fr; gap: 32px clamp(32px, 5vw, 80px); align-items: start; text-align: left;
}
.chiusura-testa { grid-area: testa; }
.chiusura-obiettivi h2 { font-size: clamp(48px, 6.4vw, 96px); line-height: .92; max-width: 8ch; margin: 0; }
.chiusura-testa p { margin-top: 24px; max-width: 30ch; font-size: 20px; color: var(--ifp-inchiostro-2); }
.chiusura-altro { grid-area: altro; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--ifp-fumo); }
.obiettivi { grid-area: obiettivi; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.obiettivi a {
  --accento: var(--ifp-corallo); --su-accento: var(--ifp-su-corallo); --tinta-accento: var(--ifp-tinta);
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: clamp(200px, 19vw, 248px); padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--ifp-filo); border-radius: 24px; background: var(--ifp-bianco-fisso);
  color: var(--ifp-inchiostro); text-decoration: none;
  transition: translate 520ms cubic-bezier(.34, 1.56, .64, 1), color 320ms var(--ifp-ease), border-color 320ms var(--ifp-ease), box-shadow 320ms var(--ifp-ease);
}
.obiettivi li:nth-child(2) a, .obiettivi li:nth-child(3) a { --accento: #3F4FA3; --su-accento: var(--ifp-bianco-fisso); --tinta-accento: rgba(63, 79, 163, .10); }
.obiettivi a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accento); clip-path: circle(0 at calc(100% - 46px) 46px); transition: clip-path 640ms var(--ifp-ease); }
/* Le icone 3D hanno il fondo bianco: diventano un badge arrotondato che resta chiaro anche sul colore. */
.obiettivi img { width: clamp(72px, 7vw, 92px); height: auto; padding: 6px; border-radius: 24px; background: var(--ifp-bianco-fisso); box-shadow: 0 0 0 1px rgba(10, 10, 11, .06), 0 12px 24px rgba(10, 10, 11, .12); transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.obiettivi strong { font: 600 clamp(22px, 2.1vw, 30px)/1.05 var(--ifp-display); letter-spacing: -.02em; max-width: 11ch; }
.obiettivo-freccia {
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; padding: 12px; border-radius: 50%;
  background: var(--tinta-accento); color: var(--accento); rotate: -45deg;
  transition: rotate 520ms cubic-bezier(.34, 1.56, .64, 1), background-color 320ms var(--ifp-ease), color 320ms var(--ifp-ease);
}
.obiettivi a:focus-visible { border-radius: 24px; outline-offset: 4px; }
.obiettivi a:focus-visible, .obiettivi a:active { color: var(--su-accento); border-color: var(--accento); }
.obiettivi a:focus-visible::before, .obiettivi a:active::before { clip-path: circle(150% at calc(100% - 46px) 46px); }
.obiettivi a:focus-visible img { transform: translateY(-6px) rotate(-10deg) scale(1.1); }
.obiettivi a:focus-visible .obiettivo-freccia { rotate: 0deg; background: var(--su-accento); color: var(--accento); }
@media (hover: hover) and (pointer: fine) {
  .obiettivi a:hover { translate: 0 -6px; color: var(--su-accento); border-color: var(--accento); box-shadow: 0 22px 44px rgba(10, 10, 11, .14); }
  .obiettivi a:hover::before { clip-path: circle(150% at calc(100% - 46px) 46px); }
  .obiettivi a:hover img { transform: translateY(-6px) rotate(-10deg) scale(1.1); }
  .obiettivi a:hover .obiettivo-freccia { rotate: 0deg; background: var(--su-accento); color: var(--accento); }
}
/* Gli obiettivi entrano uno dopo l'altro: la lista è già visibile, si muovono le voci. */
.obiettivi.rivela { opacity: 1; translate: 0 0; }
.obiettivi li { opacity: 0; translate: 0 32px; transition: opacity 640ms var(--ifp-ease), translate 640ms var(--ifp-ease); }
.obiettivi li:nth-child(2) { transition-delay: 80ms; }
.obiettivi li:nth-child(3) { transition-delay: 160ms; }
.obiettivi li:nth-child(4) { transition-delay: 240ms; }
.obiettivi[data-visibile] li { opacity: 1; translate: 0 0; }

/* ---------- Pagine interne ---------- */
.pagina-intro h1 { max-width: 14ch; }
.blocco { max-width: var(--larghezza); margin: var(--sezione) auto 0; padding: clamp(24px, 4vw, 56px); background: var(--ifp-bianco-fisso); border: 1px solid var(--ifp-filo); border-radius: 24px; }
@media (max-width: 1340px) { .blocco { margin-left: var(--pad); margin-right: var(--pad); } }
.blocco > .griglia-talent { margin: 0; }
.pagina-intro > p { color: var(--ifp-inchiostro-2); }
.blocco > header { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--ifp-filo); }
.blocco > header h2 { font-size: clamp(36px, 5vw, 64px); }
.blocco > header p { color: var(--ifp-fumo); font-size: 20px; max-width: 44ch; }
.passi { list-style: none; margin: 0; padding: 0; }
.passi li:last-child { border-bottom: 0; padding-bottom: 0; }
.passi li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--ifp-filo); }
.passi h3 { font-size: clamp(24px, 2.6vw, 32px); }
.passi p { color: var(--ifp-inchiostro-2); max-width: 50ch; }
/* ---------- Pagina creator: servizi, condizioni e letture dal blog Creators ---------- */
.servizi { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.servizi li { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: 20px; background: #F6F5F3; }
.servizi li.servizio-largo { grid-column: span 3; }
/* Le icone 3D hanno il fondo bianco: sul grigio caldo il bianco sparisce. */
.servizi img { width: 56px; height: 56px; mix-blend-mode: multiply; }
.servizi h3 { margin-top: 8px; font-size: clamp(22px, 2vw, 28px); }
.servizi p { color: var(--ifp-inchiostro-2); font-size: 17px; max-width: 46ch; }
.servizio-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 16px; text-decoration: underline; text-decoration-color: var(--ifp-corallo); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.servizio-link span { transition: translate var(--ifp-fast) var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) { .servizio-link:hover span { translate: 3px 0; } }

.condizioni, .letture { max-width: var(--larghezza); margin: var(--sezione) auto 0; padding: 0 var(--pad); }
.condizioni h2, .letture h2 { font-size: clamp(36px, 5vw, 64px); max-width: 15ch; }
.condizioni dl { margin: 40px 0 0; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--ifp-filo); border-radius: 24px; background: var(--ifp-bianco-fisso); row-gap: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: clamp(20px, 3vw, 40px); }
.metodo dl { margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: clamp(20px, 3vw, 40px); }
.condizioni dt, .metodo dt { font: 600 clamp(40px, 4.6vw, 68px)/1 var(--ifp-display); letter-spacing: -.04em; }
.condizioni dt:first-of-type, .metodo dt:first-of-type { color: var(--ifp-corallo); }
.condizioni dd, .metodo dd { margin: 12px 0 0; color: var(--ifp-inchiostro-2); font-size: 17px; max-width: 28ch; }


.letture > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.letture ul { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.letture li { display: flex; }
.letture li a {
  flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 24px;
  border: 1px solid var(--ifp-filo); border-radius: 20px; background: var(--ifp-bianco-fisso); color: inherit; text-decoration: none;
  transition: translate 420ms cubic-bezier(.34, 1.56, .64, 1), border-color 260ms var(--ifp-ease), box-shadow 260ms var(--ifp-ease);
}
.letture li a:focus-visible { border-radius: 20px; outline-offset: 4px; }
.letture img { width: 56px; height: 56px; }
.lettura-tipo { align-self: flex-start; margin-top: 4px; padding: 5px 10px; border-radius: var(--ifp-r-pill); background: var(--ifp-tinta); font: 600 13px/1 var(--ifp-testo); }
.letture li:nth-child(n+3) .lettura-tipo { background: rgba(63, 79, 163, .12); }
.letture strong { font: 600 clamp(20px, 1.7vw, 24px)/1.15 var(--ifp-display); letter-spacing: -.02em; }
.lettura-testo { color: var(--ifp-fumo); font-size: 16px; }
.lettura-vai { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 16px; }
.lettura-vai span { display: inline-block; transition: translate var(--ifp-fast) var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) {
  .letture li a:hover { translate: 0 -4px; border-color: var(--ifp-filo-forte); box-shadow: 0 18px 40px rgba(10, 10, 11, .08); }
  .letture li a:hover .lettura-vai span { translate: 3px 0; }
}
@media (max-width: 980px) {
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servizi li, .servizi li.servizio-largo { grid-column: span 1; }
  .servizi li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .condizioni dl { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  .condizioni dt:nth-of-type(even) { margin-top: 32px; }
  .metodo dl { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .metodo dt:not(:first-of-type) { margin-top: 28px; }
  .letture ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letture li a { min-height: 0; }
}
@media (max-width: 600px) {
  .servizi { grid-template-columns: minmax(0, 1fr); }
  .condizioni dl { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .condizioni dt + dd ~ dt { margin-top: 28px; }
  .letture ul { grid-template-columns: minmax(0, 1fr); }
}

/* Roster a bolle. L'area di ogni bolla è proporzionale ai follower totali (data-follower), con un
   minimo leggibile; site.js le dispone a nuvola senza sovrapposizioni (data-bolle, --x, --y, --d).
   Strati: li = posto e profondità allo scroll, a = galleggiamento (translate) e spinta del
   puntatore (transform), img = foto. Senza JS resta una griglia di cerchi. */
.blocco:has(> .griglia-talent) { background: transparent; border: 0; padding-inline: 0; }
/* Sul telefono cornice e margini della card esterna toglievano un quarto di larghezza alle card dei servizi. */
@media (max-width: 600px) { .blocco:has(> .servizi) { background: transparent; border: 0; padding-inline: 0; } }
.griglia-talent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
.griglia-talent li { position: relative; }
.griglia-talent a { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; text-decoration: none; isolation: isolate;
  box-shadow: 0 0 0 1px var(--ifp-filo), 0 18px 40px rgba(10, 10, 11, .14);
  transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--s, 1)); }
.griglia-talent img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: filter 320ms var(--ifp-ease); }
/* Nome e follower sotto la bolla, senza fondo: la foto resta intera. site.js lascia lo spazio. */
.griglia-talent strong { display: block; margin-top: 10px; color: var(--ifp-inchiostro); font: 600 16px/1.2 var(--ifp-display); text-align: center; }
.griglia-talent strong small { display: block; margin-top: 2px; font: 500 13px/1.2 var(--ifp-testo); color: var(--ifp-fumo); font-variant-numeric: tabular-nums; }
.griglia-talent[data-bolle] strong { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; font-size: clamp(13px, calc(var(--d, 200px) * .07), 17px); }
.griglia-talent strong small { margin-top: 1px; font-size: clamp(12px, calc(var(--d, 200px) * .055), 14px); }
/* Freccia corallo: dice dove porta il clic (la scheda con i numeri). */
.griglia-talent a::after {
  content: ""; position: absolute; top: 12%; right: 12%; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ifp-corallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 20px no-repeat;
  opacity: 0; scale: .6; rotate: -45deg; transition: opacity 260ms var(--ifp-ease), scale 420ms var(--ifp-ease), rotate 420ms var(--ifp-ease);
}
.griglia-talent a:focus-visible { outline: 3px solid var(--ifp-corallo); outline-offset: 4px; }
.griglia-talent a:focus-visible::after, .griglia-talent li[data-puntata] a::after { opacity: 1; scale: 1; rotate: 0deg; }
/* Le altre bolle perdono colore e luce (niente trasparenza, sul bianco sbiadirebbe). */
.griglia-talent[data-puntata] li:not([data-puntata]) img { filter: saturate(.2) brightness(.94); }
.griglia-talent[data-bolle] { display: block; position: relative; height: var(--altezza); }
.griglia-talent[data-bolle] > li { position: absolute; left: var(--x); top: var(--y); width: var(--d); }
.griglia-talent[data-bolle] li[data-puntata] { z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  /* Sbocciano dalla più grande alla più piccola (--i), poi galleggiano ognuna col suo ritmo. */
  .griglia-talent[data-bolle] > li { opacity: 0; scale: .35; transition: opacity 420ms var(--ifp-ease) calc(var(--i) * 70ms), scale 900ms var(--ifp-ease) calc(var(--i) * 70ms); }
  .griglia-talent[data-bolle][data-visibile] > li { opacity: 1; scale: 1; }
  .griglia-talent[data-bolle] a { animation: bolla-galleggia var(--durata, 6s) ease-in-out calc(var(--fase, 0) * -1s) infinite alternate; }
  @supports (animation-timeline: view()) {
    /* Profondità: le bolle grandi (--prof alto) scorrono di più, come se fossero più vicine. */
    .griglia-talent[data-bolle] > li { animation: bolla-profondita linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes bolla-galleggia { from { translate: 0 calc(var(--ampio, 8px) * -1); } to { translate: 0 var(--ampio, 8px); } }
@keyframes bolla-profondita { from { translate: 0 calc(var(--prof, .5) * 70px); } to { translate: 0 calc(var(--prof, .5) * -70px); } }

/* Scheda talent: il dialogo occupa lo schermo; dietro la card un campo di punti nei colori della
   foto (talent.js). La card ha misura fissa per ogni creator e nessuna barra di scorrimento. */
html:has(.scheda[open]) { overflow: hidden; }
.scheda { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0A0A0B; color: #EDEDEF; overflow: hidden; display: none; place-items: center; }
.scheda[open] { display: grid; }
.scheda::backdrop { background: transparent; }
.scheda-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scheda-corpo { position: relative; width: min(1120px, 100vw - 48px); height: min(740px, 100dvh - 40px); overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "foto testa" "foto lista" "foto nota" "foto azioni"; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 0 clamp(28px, 4vw, 52px); padding: clamp(24px, 3.4vw, 40px); background: var(--ifp-notte); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; }
.scheda-punti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* Le foto sono quadrate: riquadro quadrato centrato nella colonna, così ogni immagine si vede intera. */
.scheda-foto { grid-area: foto; align-self: center; margin: 0; min-height: 0; }
.scheda-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; max-height: 100%; object-fit: cover; border-radius: 24px; }
.scheda-testa { grid-area: testa; padding-right: 56px; }
.scheda-testa h2 { font-size: clamp(28px, 3vw, 40px); }
.scheda-totale { margin: 8px 0 0; color: #A3A3AA; font-size: 16px; }
.scheda-totale b { display: block; color: #EDEDEF; font: 600 clamp(36px, 4.4vw, 56px)/1 var(--ifp-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.scheda-piattaforme { grid-area: lista; list-style: none; margin: 20px 0 0; padding: 0; min-height: 0; }
.scheda-piattaforme li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icona nome num" "barra barra barra"; align-items: center; gap: 2px 14px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.scheda-piattaforme img { grid-area: icona; width: 44px; height: 44px; object-fit: contain; }
.p-nome { grid-area: nome; margin: 0; font: 600 18px/1.2 var(--ifp-display); }
.p-nome a, .p-nome span { display: block; margin-top: 2px; font: 400 15px/1.3 var(--ifp-testo); color: #A3A3AA; overflow-wrap: anywhere; }
.p-nome a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.p-nome a:hover { color: #EDEDEF; }
.p-num { grid-area: num; margin: 0; text-align: right; color: #A3A3AA; font-size: 15px; }
.p-num b { color: #EDEDEF; font: 600 22px/1.1 var(--ifp-display); font-variant-numeric: tabular-nums; }
.p-num small { display: block; margin-top: 2px; font-size: 14px; }
.p-barra { grid-area: barra; display: block; height: 24px; }
.scheda-nota { grid-area: nota; margin: 12px 0 0; color: #A3A3AA; font-size: 14px; }
.scheda-azioni { grid-area: azioni; display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.scheda-azioni .btn-primario { margin-right: auto; }
.scheda-tasto { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: transparent; color: #EDEDEF; cursor: pointer; transition: border-color var(--ifp-fast) var(--ifp-ease); }
.scheda-tasto:hover { border-color: rgba(255, 255, 255, .55); }
.scheda-tasto:focus-visible, .scheda a:focus-visible { outline: 2px solid var(--ifp-corallo); outline-offset: 3px; }
.scheda-tasto svg { width: 20px; height: 20px; }
.scheda-chiudi { position: absolute; top: clamp(16px, 2.6vw, 28px); right: clamp(16px, 2.6vw, 28px); z-index: 3; background: var(--ifp-notte); }
@media (max-width: 760px) {
  .scheda-corpo { width: calc(100vw - 20px); height: calc(100dvh - 20px); grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "foto testa" "lista lista" "nota nota" "azioni azioni"; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 0 16px; padding: 16px; border-radius: 22px; }
  .scheda-foto img { border-radius: 16px; }
  .scheda-testa { align-self: center; padding-right: 48px; }
  .scheda-testa h2 { font-size: 24px; }
  .scheda-totale { font-size: 14px; }
  .scheda-totale b { font-size: 36px; }
  .scheda-piattaforme { margin-top: 16px; }
  .scheda-piattaforme li { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 48%); padding: 8px 0; }
  .scheda-piattaforme img { width: 40px; height: 40px; }
  .p-nome { font-size: 16px; }
  .p-nome a, .p-nome span, .p-num, .p-num small { font-size: 13px; }
  .p-num b { font-size: 18px; }
  .p-barra { height: 22px; }
  .scheda-nota { font-size: 13px; }
  .scheda-azioni { margin-top: 12px; gap: 8px; }
  .scheda-azioni .btn-primario { flex: 1 1 auto; justify-content: center; margin-right: 0; padding-left: 18px; font-size: 15px; }
  .scheda-azioni .scheda-tasto { width: 44px; height: 44px; }
  .solo-largo { display: none; }
  .scheda-chiudi { width: 44px; height: 44px; top: 16px; right: 16px; }
}
/* Schermi larghi ma bassi (laptop piccoli): righe più strette, la card resta della stessa misura per tutti. */
@media (min-width: 761px) and (max-height: 760px) {
  .scheda-testa h2 { font-size: 32px; }
  .scheda-totale b { font-size: 44px; }
  .scheda-piattaforme { margin-top: 14px; }
  .scheda-piattaforme li { padding: 5px 0; }
  .p-barra { height: 20px; }
  .scheda-azioni { margin-top: 12px; }
}
/* Telefoni bassi: foto, righe e barre più compatte, così anche quattro piattaforme stanno senza scorrere. */
@media (max-width: 760px) and (max-height: 760px) {
  .scheda-corpo { grid-template-columns: 76px minmax(0, 1fr); padding: 14px; }
  .scheda-totale b { font-size: 30px; }
  .scheda-piattaforme { margin-top: 10px; }
  .scheda-piattaforme li { padding: 6px 0; gap: 2px 12px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .scheda-piattaforme img { width: 36px; height: 36px; }
  .p-barra { height: 18px; }
  .scheda-nota { margin-top: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .scheda[open] { animation: scheda-velo 420ms var(--ifp-ease) both; }
  .scheda[open] .scheda-corpo { animation: scheda-entra 520ms var(--ifp-ease) both; }
  .scheda[data-volo][open], .scheda[data-volo][open] .scheda-corpo { animation: none; }
}
@keyframes scheda-entra { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes scheda-velo { from { opacity: 0; } to { opacity: 1; } }
::view-transition-group(talent-foto) { animation-duration: 640ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Contatti: percorso guidato, una schermata per passaggio ---------- */
.contatti { max-width: var(--larghezza); min-height: calc(100svh - 76px); margin: 0 auto; padding: clamp(24px, 5vh, 64px) var(--pad); display: grid; align-items: center; }
.contatti-corpo { --form-accent: var(--ifp-corallo); --form-deep: #A43A20; --form-soft: #FFF0EA; --form-on: var(--ifp-nero-fisso); width: min(100%, 800px); min-width: 0; margin-inline: auto; }
.contatti-piede { padding: 20px var(--pad) 28px; color: var(--ifp-fumo); font-size: 14px; text-align: center; }
.contatti-corpo:has(.modulo[data-tipo="creator"]) { --form-accent: #3F4FA3; --form-deep: #3F4FA3; --form-soft: #EEF0FF; --form-on: var(--ifp-bianco-fisso); }
.modulo { background: var(--ifp-bianco-fisso); border-radius: 28px; border: 1px solid var(--ifp-filo-forte); }
/* Invio del modulo: scena a schermo intero verso il blog. */
.invio { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 20px; padding: var(--pad); text-align: center; color: var(--ifp-su-corallo); overflow: hidden; outline: none; }
.invio[hidden] { display: none; }
.invio-onda { position: absolute; inset: 0; z-index: -1; background: var(--ifp-corallo); }
.invio-titolo { font-size: clamp(72px, 14vw, 200px); line-height: .9; text-transform: uppercase; }
.invio-titolo em { font-style: normal; color: var(--ifp-bianco-fisso); }
.invio-testo { max-width: 34ch; font-size: clamp(18px, 2vw, 22px); }
.invio .btn-primario { background: var(--ifp-nero-fisso); color: var(--ifp-bianco-fisso); box-shadow: none; }
.invio-barra { width: min(240px, 60vw); height: 4px; border-radius: 2px; background: var(--ifp-nero-fisso); transform-origin: left; transform: scaleX(0); }
.invio-aereo, .invio-icona { position: absolute; left: 0; top: 0; pointer-events: none; }
.invio-aereo { width: 96px; height: 96px; object-fit: contain; z-index: 1; filter: drop-shadow(0 18px 24px rgba(10, 10, 11, .25)); }
.invio-icona { width: 104px; height: 104px; margin: -52px 0 0 -52px; object-fit: contain; z-index: -1; opacity: 0; filter: drop-shadow(0 14px 20px rgba(10, 10, 11, .2)); }
@media (prefers-reduced-motion: reduce) { .invio-barra { transform: none; } }
.modulo { min-width: 0; overflow: clip; contain: paint; scroll-margin-top: 100px; }
.modulo-testata { position: relative; min-height: 142px; padding: 28px 140px 28px 32px; background: var(--form-accent); color: var(--form-on); }
.modulo-testata > img { position: absolute; width: 112px; height: 112px; right: 20px; top: 16px; object-fit: contain; background: var(--ifp-bianco-fisso); border-radius: 50%; padding: 10px; }
.modulo-testata p { margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.modulo-testata h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.modulo-testata h1:focus { outline: none; }
.percorso-form { padding: 16px 24px; border-bottom: 1px solid var(--ifp-filo); }
.avanzamento-passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.avanzamento-passi button { display: grid; justify-items: center; gap: 7px; width: 100%; min-height: 68px; padding: 6px 0; background: var(--ifp-bianco-fisso); color: var(--ifp-fumo); border: 0; border-radius: 10px; font: 500 14px/1.2 var(--ifp-testo); cursor: pointer; }
.avanzamento-passi button:disabled { cursor: default; opacity: 1; }
.passo-segno { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ifp-contorno-campo); border-radius: 50%; font-weight: 600; }
.passo-segno svg { width: 18px; height: 18px; }
.avanzamento-passi li[data-stato="ora"] button { color: var(--form-deep); font-weight: 600; background: var(--form-soft); }
.avanzamento-passi li[data-stato="ora"] .passo-segno { background: var(--form-accent); color: var(--form-on); border-color: var(--form-deep); }
.avanzamento-passi li[data-stato="fatto"] button { color: var(--form-deep); }
.avanzamento-passi li[data-stato="fatto"] .passo-segno { background: var(--form-soft); border-color: var(--form-deep); }
@media (hover: hover) and (pointer: fine) { .avanzamento-passi li[data-stato="fatto"] button:hover { box-shadow: inset 0 0 0 1px var(--form-deep); } }
.sr-passaggio { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modulo-domande { padding: 28px 32px; }
.chi { min-width: 0; border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chi > legend { margin-bottom: 20px; font: 600 22px/1.2 var(--ifp-display); }
.porta { --scelta-colore: #A43A20; position: relative; display: grid; justify-items: start; gap: 12px; padding: 22px; border-radius: 20px; border: 2px solid transparent; background: #FFF0EA; cursor: pointer; }
.porta-creator { --scelta-colore: #3F4FA3; background: #EEF0FF; }
.porta input, .chip-scelta input, .social-scelta input, .obiettivo-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.porta > img { width: 92px; height: 92px; object-fit: contain; transition: transform 300ms var(--ifp-ease); }
.porta > strong { font: 600 23px/1.15 var(--ifp-display); }
.porta > span { color: var(--ifp-inchiostro-2); font-size: 16px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .porta:hover > img { transform: translateY(-4px) rotate(-5deg); } }
.porta:has(input:checked) { border-color: var(--scelta-colore); }
.scelta-segno { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ifp-contorno-campo); border-radius: 50%; background: var(--ifp-bianco-fisso); color: var(--ifp-bianco-fisso); }
.scelta-segno svg { width: 17px; height: 17px; opacity: 0; }
:is(.porta,.social-scelta,.obiettivo-scelta,.chip-scelta):has(input:checked) .scelta-segno { background: var(--scelta-colore, var(--form-deep)); border-color: var(--scelta-colore, var(--form-deep)); }
:is(.porta,.social-scelta,.obiettivo-scelta,.chip-scelta):has(input:checked) .scelta-segno svg { opacity: 1; }
:is(.porta,.social-scelta,.obiettivo-scelta):has(input:focus-visible), .chip-scelta input:focus-visible + span { outline: 2px solid var(--form-deep); outline-offset: 3px; }
.chi .errore { grid-column: 1 / -1; }
.passo { min-width: 0; display: grid; gap: 28px; }
.modulo .campo { display: grid; gap: 10px; margin: 0; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { padding: 0; font-size: 18px; font-weight: 600; }
.campo small { font-weight: 400; color: var(--ifp-fumo); font-size: 14px; }
.campo input:not([type="radio"]):not([type="checkbox"]), .campo textarea { min-width: 0; width: 100%; min-height: 54px; padding: 14px 16px; background: var(--ifp-bianco-fisso); color: var(--ifp-inchiostro); border: 1.5px solid var(--ifp-contorno-campo); border-radius: 12px; font: 400 18px/1.4 var(--ifp-testo); }
.campo textarea { min-height: 128px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--ifp-fumo); }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--form-deep); outline-offset: 2px; border-color: var(--form-deep); }
.campo [aria-invalid="true"] { border-color: var(--ifp-negativo-testo); }
.gruppo-form > legend { margin-bottom: 14px; }
.aiuto-campo { font-size: 16px; line-height: 1.5; color: var(--ifp-fumo); }
.scelte-social { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.social-scelta, .obiettivo-scelta { position: relative; min-width: 0; cursor: pointer; }
.social-scelta > span { position: relative; display: grid; justify-items: center; gap: 10px; padding: 16px 8px; border: 1.5px solid var(--ifp-contorno-campo); border-radius: 18px; background: var(--ifp-bianco-fisso); transition: border-color 200ms var(--ifp-ease), background-color 200ms var(--ifp-ease); }
.social-scelta img { width: 72px; height: 72px; object-fit: contain; }
.social-scelta strong { font-size: 16px; font-weight: 600; }
.social-scelta .scelta-segno { width: 20px; height: 20px; right: 8px; top: 8px; }
:is(.social-scelta,.obiettivo-scelta) input:checked + span { border-color: var(--form-deep); background: var(--form-soft); box-shadow: inset 0 0 0 .5px var(--form-deep); }
@media (hover: hover) and (pointer: fine) { :is(.social-scelta,.obiettivo-scelta):hover > span { border-color: var(--form-deep); } }
.scelte-obiettivo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.obiettivo-scelta > span { position: relative; display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 14px 34px 14px 14px; border: 1.5px solid var(--ifp-contorno-campo); border-radius: 16px; background: var(--ifp-bianco-fisso); }
.obiettivo-scelta img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.obiettivo-scelta strong { font: 600 16px/1.35 var(--ifp-testo); }
.obiettivo-scelta .scelta-segno { width: 18px; height: 18px; top: 9px; right: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips-argomenti { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); }
.chip-scelta { position: relative; cursor: pointer; }
.chip-scelta > span { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 68px; padding: 12px 28px 12px 12px; border-radius: 12px; border: 1.5px solid var(--ifp-contorno-campo); background: var(--ifp-bianco-fisso); font-size: 16px; line-height: 1.4; font-weight: 500; }
.chip-scelta img { width: 40px; height: 40px; flex: none; object-fit: contain; mix-blend-mode: multiply; }
.chips-argomenti .chip-scelta > span { width: 100%; min-height: 76px; padding: 12px 10px; }
.chips-argomenti .chip-scelta img { width: 44px; height: 44px; }
.chip-scelta .scelta-segno { width: 16px; height: 16px; top: 5px; right: 5px; }
.chip-scelta .scelta-segno svg { width: 12px; height: 12px; }
.chip-scelta input:checked + span { border-color: var(--form-deep); background: var(--form-soft); color: var(--form-deep); box-shadow: inset 0 0 0 .5px var(--form-deep); }
.errore { color: var(--ifp-negativo-testo); font-size: 16px; margin: 0; }
.errore:empty { display: none; }
.modulo-piede { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 32px; background: var(--form-soft); border-top: 1px solid var(--ifp-filo); }
.modulo-piede > p { flex-basis: 100%; color: var(--ifp-inchiostro-2); font-size: 15px; }
.modulo-piede .btn-primario { margin-left: auto; min-width: 190px; box-shadow: none; }
.modulo[data-tipo="creator"] .btn-primario { --bg: #3F4FA3; --fg: #FFFFFF; --fill: #1F2859; --fill-fg: #FFFFFF; --chip: #FFFFFF; --chip-fg: #3F4FA3; }
.modulo > .nota { margin: 0; padding: 16px 32px; }
.nota { color: var(--ifp-fumo); font-size: 14px; }
@media (max-width: 600px) {
  .modulo-testata { min-height: 126px; padding: 24px 100px 24px 20px; }
  .modulo-testata > img { width: 80px; height: 80px; top: 24px; right: 12px; }
  .modulo-testata p { font-size: 14px; }
  .percorso-form { padding: 12px; }
  .avanzamento-passi { gap: 2px; }
  .avanzamento-passi button { font-size: 12px; }
  .modulo-domande { padding: 24px 20px; }
  .chi { grid-template-columns: 1fr; }
  .porta { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; padding: 18px; }
  .porta > img { grid-row: 1 / 3; width: 64px; height: 64px; }
  .porta > strong { padding-right: 14px; font-size: 21px; }
  .porta > span { font-size: 15px; }
  .scelte-obiettivo { grid-template-columns: 1fr; }
  .scelte-social { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-scelta img { width: 64px; height: 64px; }
  .chips-argomenti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips-argomenti .chip-scelta > span { gap: 8px; }
  .chips-argomenti .chip-scelta img { width: 36px; height: 36px; }
  .modulo-piede { padding: 20px; }
  .modulo-piede .btn { min-width: 0; width: 100%; white-space: normal; }
  .modulo > .nota { padding: 16px 20px; }
}
/* Il cambio di percorso accompagna le scelte senza animare le dimensioni del modulo. */
@media (prefers-reduced-motion: no-preference) {
  .modulo-testata, .modulo-piede { transition: background-color 240ms var(--ifp-ease), color 240ms var(--ifp-ease); }
  .avanzamento-passi button, .passo-segno, .porta,
  .social-scelta > span, .obiettivo-scelta > span, .chip-scelta > span,
  .scelta-segno { transition: background-color 180ms var(--ifp-ease), border-color 180ms var(--ifp-ease), color 180ms var(--ifp-ease), box-shadow 180ms var(--ifp-ease), transform 220ms var(--ifp-ease); }
  .scelta-segno svg { transform: scale(.55); transition: opacity 140ms var(--ifp-ease), transform 220ms var(--ifp-ease); }
  :is(.porta,.social-scelta,.obiettivo-scelta,.chip-scelta):has(input:checked) .scelta-segno svg { transform: scale(1); }
  :is(.porta,.social-scelta,.obiettivo-scelta):active,
  .chip-scelta:active > span { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .modulo *, .modulo *::before { animation: none !important; transition: none !important; }
  @media (hover: hover) and (pointer: fine) { .porta:hover > img { transform: none; } }
}

/* ---------- Footer: almeno 2/5 dello schermo, campo a punti notte, marchio a tutta larghezza ---------- */
.piede {
  position: relative; isolation: isolate; overflow: clip; max-height: 60vh; min-height: 0;
  display: grid; grid-template-rows: auto auto auto; gap: clamp(16px, 2.4vh, 28px);
  margin-top: var(--sezione); padding: clamp(28px, 5vh, 56px) var(--pad) 0;
  background: var(--ifp-notte); color: #EDEDEF; border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0;
}
.piede .campo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.piede-alto { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; max-width: var(--larghezza); width: 100%; margin: 0 auto; }
.piede-invito h2 { font-size: clamp(34px, min(4.6vw, 7vh), 72px); line-height: .94; letter-spacing: -.04em; max-width: 14ch; }
.piede-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 2.6vh, 28px); }
.btn-fantasma { color: #EDEDEF; border-color: rgba(255, 255, 255, .4); background-color: #1C1C1F; }

.piede-link ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.piede-link a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px 0 6px;
  border-radius: var(--ifp-r-dialog); text-decoration: none; font: 600 clamp(17px, 1.5vw, 21px)/1 var(--ifp-display); letter-spacing: -.02em;
  transition: background-color var(--ifp-fast) var(--ifp-ease), padding var(--ifp-base, 260ms) var(--ifp-ease);
}
.piede-link img { width: 32px; height: 32px; object-fit: contain; transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
.piede-link a:focus-visible { background: rgba(255, 255, 255, .07); padding-left: 16px; }
@media (hover: hover) and (pointer: fine) { .piede-link a:hover { background: rgba(255, 255, 255, .07); padding-left: 16px; } }
.piede-link a:focus-visible img { transform: rotate(-12deg) scale(1.2); }
@media (hover: hover) and (pointer: fine) { .piede-link a:hover img { transform: rotate(-12deg) scale(1.2); } }
.piede-marchio { order: 3; display: flex; justify-content: center; margin: 0; line-height: 0; padding-bottom: clamp(14px, 2.4vh, 28px); }
.piede-basso { order: 2; }
.piede-marchio img { width: auto; max-width: 100%; height: clamp(64px, 19vh, 230px); transform: translateY(calc((1 - var(--sale, 1)) * 30%)); opacity: calc(.3 + var(--sale, 1) * .7); }
.piede-basso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: var(--larghezza); width: 100%; margin: 0 auto; padding-top: 14px; border-top: 1px solid var(--ifp-filo-notte); color: var(--ifp-fumo-notte); font-size: 14px; }
.su { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--ifp-r-pill); color: #EDEDEF; text-decoration: none; border: 1px solid rgba(255, 255, 255, .24); }
.su svg { width: 16px; height: 16px; transition: transform var(--ifp-fast) var(--ifp-ease); }
@media (hover: hover) and (pointer: fine) { .su:hover svg { transform: translateY(-3px); } }
@media (max-width: 860px) {
  .piede-alto { grid-template-columns: 1fr; gap: 20px; }
  .piede { max-height: none; }
  .piede-link ul { grid-template-columns: 1fr 1fr; }
  .piede-link a { font-size: 18px; min-height: 52px; }
  .piede-link img { width: 32px; height: 32px; }
}

/* ---------- Moto ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.entra { animation: rise 640ms var(--ifp-ease) both; }
.entra-2 { animation-delay: 120ms; }
.entra-3 { animation-delay: 240ms; }
.rivela { opacity: 0; translate: 0 24px; transition: opacity 640ms var(--ifp-ease), translate 640ms var(--ifp-ease); }
.rivela[data-visibile] { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .chip, .avatar { animation: none; }
  .obiettivi li { opacity: 1; translate: 0 0; transition: none; }
  .carte li.rivela:not([data-visibile]) { rotate: 0deg; }
  .showreel { height: auto; }
  .schermo { position: relative; height: auto; padding: 0 var(--pad); --p: 0; }
  .rivela { opacity: 1; translate: 0 0; transition: none; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .barra { padding: 0 8px 0 18px; }
  .testata .menu { flex: none; display: inline-flex; margin-left: auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--ifp-r-pill); background: var(--ifp-tinta); color: var(--ifp-inchiostro); cursor: pointer; }
  .testata .menu svg { width: 22px; height: 22px; }
  .testata nav { display: none; position: absolute; left: var(--pad); right: var(--pad); top: 76px; margin: 0; padding: 12px; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--ifp-bianco-fisso); border-radius: 24px; box-shadow: var(--ifp-ombra-overlay); }
  .testata nav[data-aperto] { display: grid; animation: rise 320ms var(--ifp-ease) both; }
  .indicatore { display: none; }
  .voce { flex-direction: column; justify-content: center; gap: 6px; min-height: 120px; padding: 12px; border: 1px solid var(--ifp-filo); border-radius: 18px; font-size: 17px; }
  .voce img { width: 64px; height: 64px; margin: 0; }
  .voce[aria-current="page"] { border-color: var(--ifp-corallo); background: var(--ifp-tinta); }
  /* Il menu aperto è sempre bianco: le voci restano scure anche quando la barra prende il tema della sezione. */
  .testata[data-tema] nav .voce:not(.voce-cta) { color: var(--ifp-inchiostro-2); }
  .voce-cta { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 64px; margin: 8px 0 0; border: 0; padding-left: 64px; }
  .voce-cta img { width: 56px; height: 56px; left: calc(50% - 110px); }
  .barra > .btn { display: none; }
  .chip-1, .chip-2 { display: none; }
  .a3, .a4, .a5, .a6, .a7 { display: none; } .a1 { --d: 64px; left: 2%; top: 4%; } .a2 { --d: 56px; right: 3%; top: 2%; }
  @media (prefers-reduced-motion: no-preference) { .showreel { height: 130vh; } }
  .schermo video { width: calc(100% - (1 - var(--p)) * 2 * var(--pad)); }
  /* Telefono in verticale: stesso formato del film 9:16 già al primo disegno, senza aspettare lo script. */
  @media (max-width: 700px) and (orientation: portrait) {
    .schermo video { aspect-ratio: 9 / 16; width: auto; height: calc(100svh - 96px - (1 - var(--p)) * 64px); max-height: none; max-width: calc(100% - (1 - var(--p)) * 2 * var(--pad)); }
  }
  .chip-3 { position: static; margin: 40px auto 0; width: max-content; max-width: 100%; }
  .blocco > header, .passi li { grid-template-columns: 1fr; gap: 12px; }
  .chiusura-obiettivi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testa" "obiettivi" "altro"; grid-template-rows: none; }
  .obiettivi a { min-height: 176px; gap: 24px; }
}
@media (max-width: 520px) {
  .azioni .btn { flex: 1 1 100%; }
  .obiettivi { gap: 10px; }
  .chiusura-altro .btn { flex: 1 1 100%; gap: 10px; padding-left: 20px; font-size: 16px; }
  .obiettivi a { min-height: 164px; gap: 20px; padding: 16px; border-radius: 20px; }
  .obiettivi img { width: 60px; padding: 4px; border-radius: 18px; }
  .obiettivi strong { font-size: 19px; }
  .obiettivo-freccia { top: 16px; right: 16px; width: 36px; height: 36px; padding: 9px; }
  .obiettivi a::before { clip-path: circle(0 at calc(100% - 34px) 34px); }
  .obiettivi a:focus-visible { border-radius: 20px; }
  .carte { margin-top: 12px; }
  .carte li { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 20px; }
  .carte img { width: 52px; height: 52px; }
  .carte li:nth-child(2) { transform: rotate(2deg) translateX(-4px); }
  .carte li:nth-child(3) { transform: rotate(-1.5deg) translateX(4px); }
  .griglia-talent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Risorse editoriali: link leggibili e bersagli touch di almeno 44px. */
.risorse-percorsi { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.risorse-percorsi a { display: inline-flex; align-items: center; min-height: 44px; }