.rio-plata-hidro-card {
    position: absolute;
    left: 20px;
    bottom: 125px;
    width: auto;
    max-width: 1078px;
    min-height: 320px;
    max-height: 520px;

    border-left: 6px solid var(--codelis-logoL-rgb);
    border-radius: 12px 12px 0 0;

    overflow: hidden;

    box-shadow: 0 12px 28px rgba(0,0,0,.28);

    opacity: 0;
    transform: translateY(20px) scale(.98);
    transition: opacity .45s ease, transform .60s ease;

    z-index: 20;
    pointer-events: none;
}

.rio-plata-hidro-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.rio-plata-hidro-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 25px;

    background: linear-gradient(
        90deg,
        rgba(56, 21, 75, 1),
        rgba(47, 1, 44, 1)
    );

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.rio-plata-hidro-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--blanco-rgb);
    font-size: 20px;
    font-weight: 900;
}

.rio-plata-hidro-badge {
    background: rgba(28, 90, 156, .85);
    color: var(--blanco-rgb);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0,123,255,.85);
    font-weight: 700;
}

.rio-plata-hidro-title {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 900;
    color: var(--blanco-rgb);
}

.rio-plata-hidro-scroll-box {

    height: 380px;
    overflow: hidden;
    position: relative;

    padding: 25px 25px 35px 25px !important; /*padding: top right bottom left;*/

    background: linear-gradient(
        90deg,
        rgba(56, 21, 75, 0.45),
        rgba(47, 1, 44, 0.65)
    );

    backdrop-filter: blur(6px);
}

.rio-plata-hidro-stations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 12px;

    --rio-scroll-duration: 50s;
    --rio-scroll-distance: -100%;

    animation: scrollConPausa var(--rio-scroll-duration) linear 1 forwards;
}

@keyframes scrollConPausa {
    0%, 8% {
        transform: translateY(0);
    }

    92%, 100% {
        transform: translateY(var(--rio-scroll-distance, -100%));
    }
}

.rio-plata-hidro-station {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
        90deg,
        rgba(3, 28, 54, 0.75),
        rgba(22, 66, 114, 0.75)
    );
    border: 1px solid rgba(0, 123, 255,.85);
    padding: 12px 25px;
    border-radius: 8px;
}

.rio-plata-hidro-station strong {
    font-size: 22px;
    color: #fff;
}

.rio-plata-hidro-station-name {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}

.rio-plata-hidro-station-river-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--gris-extra-claro);
    text-transform: uppercase;
    padding-right: 10px;
}

.rio-plata-hidro-footer {
    padding: 14px 25px;
    padding-left: 110px;
    display: flex;
    justify-content: space-between;

    color: var(--blanco-rgb);
    font-size: 18px;

    background: linear-gradient(
        90deg,
        rgba(56, 21, 75, 1),
        rgba(47, 1, 44, 1)
    );

    border-top: 1px solid rgba(255,255,255,.08);
}