.sp-marquee-wrapper {
width: 100%;
overflow: hidden;
padding: 60px 0;
background: transparent;
font-family: inherit;
text-align: center;
}

.sp-heading {
text-align: center;
font-size: 14px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 32px;
}

/* --- Container e Maschere (Novità) --- /
.sp-marquee-container {
position: relative;
max-width: 1200px; / Imposta la larghezza massima come il resto del sito /
margin: 0 auto;    / Centra il contenitore /
padding: 16px 0;
overflow: hidden;
background-color: #ffffff; / Sfondo bianco per il blocco loghi */
border-radius: 12px;
}

/* Sfumature ai bordi per l'effetto "dissolvenza" /
.sp-marquee-fade-left,
.sp-marquee-fade-right {
position: absolute;
top: 0;
width: 100px; / Larghezza della sfumatura */
height: 100%;
z-index: 10;
pointer-events: none;
}

.sp-marquee-fade-left {
left: 0;
background: linear-gradient(to right, #ffffff, transparent);
}

.sp-marquee-fade-right {
right: 0;
background: linear-gradient(to left, #ffffff, transparent);
}

/* --- Animazione Marquee --- */
.sp-marquee {
display: flex;
overflow: hidden;
}

.sp-marquee-content {
display: flex;
white-space: nowrap;
min-width: max-content; /* Fondamentale: permette al contenuto di allargarsi oltre i 1200px senza rompere il layout /
align-items: center;
gap: 64px; / Spazio tra i loghi */
padding: 0 32px;

/* Animazione di base. La durata (es. 80s) viene sovrascritta dal PHP se l'utente la modifica in Elementor */
animation: sp-scroll 80s linear infinite; 


}

/* Mette in pausa l'animazione al passaggio del mouse */
.sp-marquee-content:hover {
animation-play-state: paused;
}

@keyframes sp-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-50% - 32px)); } /* Calcolo preciso per evitare scatti */
}

/* --- Stile Loghi --- /
.sp-logo {
height: 60px !important; / Altezza di default, controllabile via Elementor /
width: auto !important;
object-fit: contain;
flex-shrink: 0; / Impedisce che il logo si deformi */

/* Effetto grigio -> colore */
filter: grayscale(100%) brightness(0) opacity(0.5);
transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;


}

.sp-logo:hover {
filter: grayscale(0%) brightness(1);
opacity: 1;
transform: scale(1.05);
}

/* --- Sezione Video --- */
.sp-heading-main {
text-align: center;
font-size: 36px;
font-weight: 800;
color: #0f172a;
margin: 80px 0 40px 0;
}

@media (min-width: 768px) {
.sp-heading-main {
font-size: 48px;
}
}

.sp-video-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 32px;
padding: 0 24px;
}

@media (min-width: 768px) {
.sp-video-container {
grid-template-columns: 1fr 1fr;
}
}

.sp-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* Aspect Ratio 16:9 */
height: 0;
overflow: hidden;
background-color: #f1f5f9;
border-radius: 2rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
}

.sp-video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}