/* ============================================================
   PepsiCo Marquee - Estilos
   ============================================================ */

.pepsico-marquee-wrapper {
    position: relative;
    width: 100vw;
    /* Para que el contenedor tome el ancho completo de la pantalla rompiendo los límites de Elementor */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 20px 0;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}

.pepsico-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    will-change: transform;
    /* El gap se sobreescribe desde Elementor, por defecto 40px */
    gap: 40px;
    padding-right: 40px; /* Igual al gap para la unión perfecta */
}

.pm-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pm-text {
    font-family: 'Syne', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: clamp(80px, 12vw, 150px); /* Tamaño súper gigante por defecto, Elementor puede sobreescribir */
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -2px;
    white-space: nowrap;
}

.pm-img {
    height: 120px; /* Valor por defecto */
    width: auto;
    object-fit: cover;
    border-radius: 24px; /* Forma de píldora / bordes suaves */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    /* Prevenir que se aplaste */
    max-width: none;
}