/* Visual di Visionaria 2026 (cartella «elementi grafici», 23/10): fondo #1e1e1e, elementi colorati ai bordi, pay off a quattro colori.
   Vale per tutte le aperture del plugin: pagine nuove (.pvh), programma (.vp-hero), Meet us e iscrizione (.mu-hero), vetrina (.vt-hero), totem.
   Si carica prima dei fogli delle singole pagine, quindi le regole sono più specifiche o con !important. */

/* ---------- Fondo ed elementi ---------- */
html body .pvh, html body .vp-hero, html body .mu-hero, html body .vt-hero, html body .tt-inizio, html body .tt-fatto {
	background-color: #1e1e1e !important;
	background-image:
		url(visual/forma-verde.png),
		url(visual/uncino.png),
		url(visual/fiore.png),
		url(visual/curva.png),
		radial-gradient(circle closest-side, #dc1f1c 0 96%, transparent 100%),
		radial-gradient(circle closest-side, #f2ae14 0 96%, transparent 100%) !important;
	background-repeat: no-repeat !important;
	background-size: 210px auto, 300px auto, 112px auto, 64px auto, 190px 190px, 34px 34px !important;
	background-position: left -64px top -36px, right -70px top 22px, right 3% top 46%, left -6px bottom 14%, right 13% bottom -122px, left 34% bottom -10px !important;
	color: #fff;
}
/* Totem: anche la barra in alto e il fondo della pagina nel colore del visual. */
html body.tt-corpo, html body .tt-testa { background-color: #1e1e1e !important; }
.tt-marchio img { display: block; height: 46px; width: auto; }

/* Le fasce oblique e le sfere rosse del visual 2025 non si usano più. */
html body .pvh::before, html body .pvh::after, html body .vp-hero::before, html body .vp-hero::after,
html body .mu-hero::before, html body .vt-hero::before { display: none !important; }
html body .pvh-sfera, html body .vp-sfera, html body .mu-sfera, html body .vt-sfera { display: none !important; }

/* Con la foto del relatore a destra, l'asterisco viola si sposta in basso per non finire dietro la foto. */
html body .pvh.pvh-con-foto { background-position: left -64px top -36px, right -70px top 22px, right 2% bottom 8%, left -6px bottom 14%, right 26% bottom -122px, left 34% bottom -10px !important; }

/* Pagine di Divi con [visionaria_apertura]: la riga e la sezione che contengono solo il modulo Codice non lasciano spazio bianco. */
.et_pb_row:has(.pvh-segnaposto):not(:has(.et_pb_module:not(.et_pb_code))) { display: none !important; }
.et_pb_section:has(.pvh-segnaposto):not(:has(.et_pb_module:not(.et_pb_code))) { padding: 0 !important; min-height: 0 !important; }
.et_pb_section:has(.pvh-segnaposto):not(:has(.et_pb_module:not(.et_pb_code))) + .et_pb_section { margin-top: clamp(24px, 4vw, 48px); }

/* ---------- Pay off ---------- */
.v26-payoff { display: flex; flex-wrap: wrap; gap: .15em .5em; margin: 0 0 18px !important; padding: 0 !important; font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; font-size: clamp(16px, 1.9vw, 22px); line-height: 1.3; letter-spacing: 0; text-transform: none; }
.v26-payoff span:nth-child(1) { color: #8cbe64; }
.v26-payoff span:nth-child(2) { color: #3cbcdc; }
.v26-payoff span:nth-child(3) { color: #f8cc4c; }
.v26-payoff span:nth-child(4) { color: #b870ec; }
/* La barra sta in fondo alla parola che precede: se il pay off va a capo, la riga nuova non comincia con «|». */
.v26-payoff span:not(:last-child)::after { content: "|"; color: rgba(255,255,255,.75); margin-left: .5em; font-weight: 400; }
.tt-inizio .v26-payoff, .tt-fatto .v26-payoff { justify-content: center; font-size: clamp(20px, 2.4vw, 28px); }

/* ---------- Telefono ---------- */
@media (max-width: 700px) {
	html body .pvh, html body .vp-hero, html body .mu-hero, html body .vt-hero, html body .tt-inizio, html body .tt-fatto {
		/* l'arco rosa a sinistra finirebbe sopra il testo: da telefono non c'è */
		background-size: 120px auto, 150px auto, 58px auto, 0 0, 110px 110px, 0 0 !important;
		background-position: left -46px top -22px, right -56px top 12px, right 10px bottom 12px, left -4px bottom 30%, right 30% bottom -80px, left 0 top 0 !important;
	}
	html body .pvh.pvh-con-foto { background-position: left -46px top -22px, right -56px top 12px, right 10px bottom 12px, left -4px bottom 30%, right 30% bottom -80px, left 0 top 0 !important; }
	/* Pay off su una riga anche a 360 px. */
	.v26-payoff { font-size: clamp(12px, 3.45vw, 14px); gap: .1em .3em; }
	.v26-payoff span:not(:last-child)::after { margin-left: .3em; }
	.tt-inizio .v26-payoff, .tt-fatto .v26-payoff { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { .v26-payoff { transition: none; } }

@media print {
	html body .vp-hero { background: #fff !important; }
	.v26-payoff span { color: #000 !important; }
}