/* ==========================================================================
   SISTEMA: misure uniche per tutto il sito (12/11/2026, decise con Manuel).
   Dimensioni di testo e titoli: impostazioni globali di Elementor (kit 10).
   Qui solo quello che le globali non coprono: spazi tra blocchi, margini laterali, pulsanti.
   Si carica per ultimo. Per cambiare un valore si cambiano le variabili qui sotto.
   ========================================================================== */
:root {
	--ft-testo: 17px;          /* corpo del testo */
	--ft-spazio: 16px;         /* titolo -> paragrafo, paragrafo -> paragrafo */
	--ft-prima-h2: 48px;       /* aria prima di un nuovo H2 */
	--ft-prima-h3: 32px;       /* aria prima di un nuovo H3 / H4 */
	--ft-bordo: 20px;          /* margine laterale su telefono */
	--ft-blu: #153155;
	/* titoli: gli stessi valori delle impostazioni globali di Elementor (kit 10), da tenere allineati */
	--ft-h2: 40px; --ft-h3: 28px; --ft-h4: 21px;
}
@media (max-width: 767px) {
	:root { --ft-testo: 16px; --ft-prima-h2: 36px; --ft-prima-h3: 28px; --ft-h2: 30px; --ft-h3: 23px; --ft-h4: 19px; }
}

/* --- Titoli: il tema Gurus da' ai suoi titoli 42/34 px con un selettore piu' forte delle globali:
       qui si riportano alle misure del sistema, qualunque stile del tema sia scelto nel widget --- */
#pxl-main .elementor-widget-pxl_heading h2.pxl-item--title,
#pxl-main .pxl-text-editor h2, #pxl-main .elementor-widget-text-editor h2 { font-size: var(--ft-h2); line-height: 1.2; letter-spacing: 0; }
#pxl-main .elementor-widget-pxl_heading h3.pxl-item--title,
#pxl-main .pxl-text-editor h3, #pxl-main .elementor-widget-text-editor h3 { font-size: var(--ft-h3); line-height: 1.25; letter-spacing: 0; }
#pxl-main .elementor-widget-pxl_heading h4.pxl-item--title,
#pxl-main .pxl-text-editor h4, #pxl-main .elementor-widget-text-editor h4 { font-size: var(--ft-h4); line-height: 1.3; letter-spacing: 0; font-weight: 700; }

/* --- Testo corpo: una sola dimensione e interlinea in tutto il contenuto --- */
#pxl-main .pxl-text-editor,
#pxl-main .pxl-text-editor p,
#pxl-main .pxl-text-editor li,
#pxl-main .elementor-widget-text-editor,
#pxl-main .elementor-widget-text-editor p,
#pxl-main .elementor-widget-text-editor li {
	font-size: var(--ft-testo);
	line-height: 1.65;
}
/* niente testo giustificato, nemmeno quello scritto dentro i testi */
#pxl-main [style*="text-align: justify"],
#pxl-main [style*="text-align:justify"] { text-align: left !important; }

/* --- Spazi dentro i testi: paragrafi, elenchi, titoli scritti nel testo --- */
#pxl-main .pxl-text-editor p,
#pxl-main .elementor-widget-text-editor p { margin: 0 0 var(--ft-spazio); }

/* --- Elenchi puntati e numerati (12/11/2026, Manuel) ---
   Stesso rientro per tutti e due: il segno sta in una colonna di 26px, il testo parte sempre a 38px
   e le righe che vanno a capo restano sotto il testo, mai sotto il segno. Un solo colore: il blu FT.
   Puntati: pallino pieno. Numerati: cerchio blu col numero bianco, centrato con flex (misurato al pixel). */
#pxl-main .pxl-text-editor ul, #pxl-main .pxl-text-editor ol,
#pxl-main .elementor-widget-text-editor ul, #pxl-main .elementor-widget-text-editor ol {
	margin: 0 0 var(--ft-spazio); padding: 0; list-style: none;
}
#pxl-main .pxl-text-editor ol, #pxl-main .elementor-widget-text-editor ol { counter-reset: ft-num; }
#pxl-main .pxl-text-editor li,
#pxl-main .elementor-widget-text-editor li { position: relative; margin: 0 0 10px; padding-left: 38px; }
#pxl-main .pxl-text-editor li > p, #pxl-main .elementor-widget-text-editor li > p { margin: 0; }
#pxl-main .pxl-text-editor li > ul, #pxl-main .pxl-text-editor li > ol,
#pxl-main .elementor-widget-text-editor li > ul, #pxl-main .elementor-widget-text-editor li > ol { margin: 10px 0 0; }
#pxl-main .pxl-text-editor ul > li::before,
#pxl-main .elementor-widget-text-editor ul > li::before {
	content: ""; position: absolute; left: 9px; top: calc(0.88em - 4px);
	width: 8px; height: 8px; border-radius: 50%; background: #153155;
}
#pxl-main .pxl-text-editor li ul > li::before,
#pxl-main .elementor-widget-text-editor li ul > li::before { background: transparent; box-shadow: inset 0 0 0 2px #153155; }
#pxl-main .pxl-text-editor ol > li,
#pxl-main .elementor-widget-text-editor ol > li { counter-increment: ft-num; }
#pxl-main .pxl-text-editor ol > li::before,
#pxl-main .elementor-widget-text-editor ol > li::before {
	content: counter(ft-num); position: absolute; left: 0; top: calc(0.825em - 13px);
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; background: #153155; color: #ffffff;
	font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0;
	will-change: transform; /* cerchio e numero disegnati insieme: senza, il numero salta di 1px a seconda della riga (misurato) */
}
/* elenchi di link (classe messa dallo script elenchi-punteggiatura): freccina sottile che scivola al passaggio */
#pxl-main .ft-elenco-link a::after {
	content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(45deg); transition: transform .25s ease;
}
#pxl-main .ft-elenco-link a:hover::after,
#pxl-main .ft-elenco-link a:focus-visible::after { transform: translate(4px, -0.12em) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { #pxl-main .ft-elenco-link a::after { transition: none; } }
#pxl-main .pxl-text-editor h2, #pxl-main .elementor-widget-text-editor h2 { margin: var(--ft-prima-h2) 0 var(--ft-spazio); }
#pxl-main .pxl-text-editor h3, #pxl-main .pxl-text-editor h4,
#pxl-main .elementor-widget-text-editor h3, #pxl-main .elementor-widget-text-editor h4 { margin: var(--ft-prima-h3) 0 var(--ft-spazio); }
#pxl-main .pxl-text-editor .pxl-item--inner > :first-child,
#pxl-main .elementor-widget-text-editor .elementor-widget-container > :first-child { margin-top: 0; }
#pxl-main .pxl-text-editor .pxl-item--inner > :last-child,
#pxl-main .elementor-widget-text-editor .elementor-widget-container > :last-child { margin-bottom: 0; }

/* --- Spazi tra i blocchi: titolo -> testo sempre uguale; prima di un titolo aria fissa --- */
#pxl-main .elementor-widget-pxl_heading .pxl-item--title { margin: 0; }
#pxl-main .elementor-widget:not(:last-child) { margin-bottom: var(--ft-spazio); }
#pxl-main .elementor-widget.elementor-widget-pxl_heading:has(h2):not(:first-child) { margin-top: calc(var(--ft-prima-h2) - var(--ft-spazio)); }
#pxl-main .elementor-widget.elementor-widget-pxl_heading:has(h3, h4):not(:first-child) { margin-top: calc(var(--ft-prima-h3) - var(--ft-spazio)); }

/* --- Margini laterali su telefono: uguali dappertutto ---
   Solo le colonne principali: in quelle annidate Elementor compensa da solo (margine negativo del contenitore).
   Eccezione: i contenitori trasparenti che dentro una colonna avvolgono il video (template «video-final» 25735 e
   simili) hanno gia' il margine della colonna: niente doppio margine, il video arriva ai bordi dei testi (12/11/2026).
   I riquadri colorati dentro le colonne invece tengono i 20 px: e' la loro aria interna. */
@media (max-width: 767px) {
	#pxl-main .elementor-top-column > .elementor-widget-wrap.elementor-element-populated { padding-left: var(--ft-bordo); padding-right: var(--ft-bordo); }
	#pxl-main .e-con.e-parent { padding-left: var(--ft-bordo); padding-right: var(--ft-bordo); }
	#pxl-main .elementor-widget-wrap .e-con.e-parent:has(.elementor-widget-video) { padding-left: 0; padding-right: 0; }
	/* pagine semplici (Privacy, Cookie Policy): stesso margine */
	.ftc-testo-legale { padding-left: 5px; padding-right: 5px; }
}

/* --- Pulsanti: le misure dei pulsanti delle pagine servizi, al pixel --------------
   altezza 48, padding 9/42, raggio 200, DM Sans 15/30 peso 400, maiuscolo, icona a 12px
   principale: fondo blu, testo bianco | secondario: fondo trasparente, testo e bordo blu */
#pxl-main a.btn:not(.pxl-btn-video) {
	min-height: 48px;
	padding: 9px 42px;
	gap: 12px;
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: normal;
	text-transform: uppercase;
	border-radius: 200px;
}
/* pulsanti delle schede (Dettagli, Scopri): come il secondario, visibili anche senza mouse */
#pxl-main a.btn.btn-readmore,
#pxl-main a.btn.btn-readmore.pxl-white {
	color: var(--ft-blu);
	background-color: transparent;
	border: 1px solid var(--ft-blu);
	padding: 8px 41px; /* il bordo vero (1px) si somma: cosi' resta alto 48 come gli altri */
}
#pxl-main a.btn.btn-readmore:hover { color: #fff; background-color: var(--ft-blu); }
#pxl-main a.btn.btn-readmore i, #pxl-main a.btn.btn-readmore svg { color: inherit; fill: currentColor; }
/* carosello della home: come il principale */
#pxl-main .pxl-slider a.btn,
#pxl-main .pxl-slider1 a.btn {
	color: #fff;
	background-color: var(--ft-blu);
	border: 1px solid var(--ft-blu);
	backdrop-filter: none;
}

/* --- Tasto play: uno solo per tutto il sito (12/11/2026, deciso con Manuel) ------------------
   Lo stile e' quello del tema in La parola a loro (cerchio in vetro, triangolo bianco, onda), con misure fisse:
   cerchio 80 px su desktop e 60 su telefono, triangolo 24/20. Vale per i video del tema (La parola a loro,
   Chi siamo) e per il video di Elementor del template «blocco-video» 25522 (home e pagine servizio), che qui si
   disegna uguale. Nei widget non ci sono piu' misure del tasto: si cambiano solo queste due variabili. */
:root { --ft-play: 80px; --ft-play-icona: 24px; }
@media (max-width: 767px) { :root { --ft-play: 60px; --ft-play-icona: 20px; } }
#pxl-main a.pxl-btn-video.pxl-btn-play,
.elementor-widget-video .elementor-custom-embed-play {
	width: var(--ft-play); height: var(--ft-play); max-width: none; max-height: none; min-height: 0; padding: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; color: #fff;
	border: 1px solid rgba(255, 255, 255, .6);
	background-color: rgba(255, 255, 255, .3);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
#pxl-main a.pxl-btn-video.pxl-btn-play svg { width: var(--ft-play-icona); height: var(--ft-play-icona); }
.elementor-widget-video .elementor-custom-embed-play i {
	font-size: var(--ft-play-icona); line-height: 1; color: #fff; opacity: 1; text-shadow: none;
	margin-left: 3px; /* il triangolo sembra centrato solo se spostato un filo a destra */
	position: relative; z-index: 1;
}
/* l'onda del tema (stessa animazione dei video del tema) */
.elementor-widget-video .elementor-custom-embed-play::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background-color: rgba(255, 255, 255, .63);
	animation: pxl_pulse_border 1500ms ease-out infinite;
}

/* --- Titoli delle schede nelle griglie dei servizi: tutti alla misura dell'H3 --- */
#pxl-main .pxl-post--title,
#pxl-main .pxl-post--title a { font-size: var(--ft-h3); line-height: 1.25; letter-spacing: 0; }

/* --- Box autori degli ebook: nome come un H4, ruolo come il testo corpo --- */
#pxl-main .elementor-author-box__name { font-weight: 700; }
#pxl-main .elementor-author-box__bio,
#pxl-main .elementor-author-box__bio p { font-size: var(--ft-testo); line-height: 1.65; }

/* --- Pagine semplici (Privacy, Cookie Policy: classe .ftc-testo-legale): stesse misure dei testi Elementor --- */
.ftc-testo-legale, .ftc-testo-legale p, .ftc-testo-legale li { font-size: var(--ft-testo); line-height: 1.65; }
.ftc-testo-legale p { margin: 0 0 var(--ft-spazio); }
.ftc-testo-legale ul, .ftc-testo-legale ol { margin: 0 0 var(--ft-spazio); padding-left: 22px; }
.ftc-testo-legale li { margin: 0 0 8px; }
.ftc-testo-legale h2 { font-family: "Roboto", sans-serif; font-weight: 900; font-size: var(--ft-h2); line-height: 1.2; margin: var(--ft-prima-h2) 0 var(--ft-spazio); }
.ftc-testo-legale h3 { font-family: "Roboto", sans-serif; font-weight: 900; font-size: var(--ft-h3); line-height: 1.25; margin: var(--ft-prima-h3) 0 var(--ft-spazio); }
.ftc-testo-legale > :first-child { margin-top: 0; }

/* --- La parola a loro (26641): video, nome, ruolo, citazione; tra una testimonianza e l'altra aria fissa --- */
/* il contenitore del video non va a capo: con flex-wrap Chrome lo calcola alto 0 e l'immagine sborda sul nome
   (prima c'era un'altezza fissa di 180 px nei widget, tolta il 12/11/2026: ora 32 px tra video e nome a ogni larghezza) */
.elementor-26641 .e-con:has(> .e-con-inner > .elementor-widget-pxl_play_video),
.elementor-26641 .e-con:has(> .elementor-widget-pxl_play_video) { --flex-wrap: nowrap; }
/* nome e ruolo stanno insieme: 6 px tra loro, poi lo spazio normale prima della citazione */
#pxl-main .elementor-26641 .pxl-text-editor h3 { margin-bottom: 6px; }
#pxl-main .elementor-26641 .pxl-text-editor .ft-ruolo {
	margin-top: 0;
	font-size: 14px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase;
	color: #5b6773; font-weight: 600;
}
/* tra una riga di video e la successiva lo stacco di un nuovo H2; e' spazio tra le righe (row-gap), non margine sotto
   ogni video: cosi' sotto l'ultima riga non resta niente e il fondo pagina e' uguale alle altre pagine (12/11/2026) */
.elementor-26641 .e-con.e-parent:has(> .e-con-inner > .e-con.e-child > .elementor-widget-pxl_play_video),
.elementor-26641 .e-con.e-parent:has(> .e-con.e-child > .elementor-widget-pxl_play_video) { --row-gap: var(--ft-prima-h2); row-gap: var(--ft-prima-h2); }

/* --- Hero della home (carosello del tema pxl_slider1, solo in home, 12/11/2026) ---------------------------
   Leggibilita', a ogni larghezza: velatura scura sopra la foto (piu' forte in alto, dove stanno i testi, e in basso,
   dove stanno i punti) e un'ombra leggera ai testi. La seconda riga del titolo passa dal 50% all'80% di bianco. */
#pxl-main .pxl-slider1 .pxl-slide--bg::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 20, 32, .55) 0%, rgba(8, 20, 32, .30) 55%, rgba(8, 20, 32, .55) 100%);
}
#pxl-main .pxl-slider1 .pxl-item--title,
#pxl-main .pxl-slider1 .pxl-item--subtitle { text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .25); }
#pxl-main .pxl-slider1 .pxl-item--title { color: rgba(255, 255, 255, .8); }
/* Desktop e tablet: la foto resta a tutta larghezza, i testi stanno sui bordi del contenuto del sito (1460 px) */
@media (min-width: 768px) {
	#pxl-main .pxl-slider1 .pxl-slide-container { max-width: 1490px; padding-left: 15px; padding-right: 15px; }
	#pxl-main .pxl-slider1 .pxl-slide-content { padding-left: 0; padding-right: 0; }
}
/* Telefono: a tutto schermo e a filo dei bordi, testi in proporzione alla larghezza dello schermo */
@media (max-width: 767px) {
	#pxl-main .elementor-top-column > .elementor-widget-wrap.elementor-element-populated:has(> .elementor-widget-pxl_slider1) { padding-left: 0; padding-right: 0; }
	/* alto quanto lo schermo meno la testata (80 px), mai meno di 560; svh = schermo con le barre del browser visibili */
	#pxl-main .pxl-slider1 .pxl-slide-inner { height: max(560px, calc(100vh - 80px)); height: max(560px, calc(100svh - 80px)); max-height: none; }
	/* i testi stanno agli stessi 20 px dal bordo del resto del sito */
	#pxl-main .pxl-slider1 .pxl-slide-content { padding-left: var(--ft-bordo); padding-right: var(--ft-bordo); }
	#pxl-main .pxl-slider1 .pxl-item--title { font-size: clamp(26px, 7.4vw, 32px); max-width: none; }
	#pxl-main .pxl-slider1 .pxl-item--subtitle { font-size: clamp(15px, 4.1vw, 17px); }
}