﻿
.ct-aliados-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0; /* CLAVE para que no invada */
}

.ct-aliados-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
    font-size: .85rem;
    color: #222;
    background: #fff; /* tapa lo de atrás */
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.08);
    z-index: 2;
    position: relative;
}

/* Contenedor del marquee: SOLO ocupa el espacio disponible */
.ct-marquee {
    flex: 1 1 auto;
    min-width: 0; /* CLAVE para que no se meta debajo de otros */
    overflow: hidden;
    position: relative;
}

    /* Fade en bordes (solo dentro del marquee, NO sobre el label) */
    .ct-marquee:before,
    .ct-marquee:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 22px;
        pointer-events: none;
        z-index: 1;
    }

    .ct-marquee:before {
        left: 0;
        background: linear-gradient(to right, #fff 20%, rgba(255,255,255,0));
    }

    .ct-marquee:after {
        right: 0;
        background: linear-gradient(to left, #fff 20%, rgba(255,255,255,0));
    }

/* Track animado */
.ct-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: ct-scroll var(--ct-duration, 18s) linear infinite;
}

/* Grupo con items */
.ct-marquee-group {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding-right: .55rem; /* separación mínima entre “vueltas” */
}

.ct-marquee-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    background: #fafafa;
    color: #111;
    border-radius: 999px;
    padding: .28rem .65rem;
    font-size: .86rem;
}

/* Pausa con hover en desktop */
@media (hover:hover) {
    .ct-marquee:hover .ct-marquee-track {
        animation-play-state: paused;
    }
}

/* Animación con distancia EXACTA (calculada por JS) */
@keyframes ct-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--ct-distance, 300px)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-marquee-track {
        animation: none;
    }
}

/* ===== Desktop: limitar ancho de la banda para que respire la derecha ===== */
/* ===== FIX DEFINITIVO: banda ocupa espacio disponible sin romper la derecha ===== */
@media (min-width:1200px) {

    /* Asegura layout flex correcto */
    .nk-header .nk-header-wrap {
        display: flex !important;
        align-items: center !important;
    }

    /* Reservamos espacio a la derecha (bandera+botón+campana) */
    .nk-header-wrap .nk-header-news {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - clamp(190px, 18vw, 320px)) !important;
    }

    /* La derecha no se achica ni salta */
    .nk-header-wrap .nk-header-tools {
        flex: 0 0 auto !important;
        margin-left: .75rem;
    }

        .nk-header-wrap .nk-header-tools,
        .nk-header-wrap .nk-header-tools * {
            white-space: nowrap;
        }

    /* Que el marquee use el ancho real de la banda */
    .nk-header-wrap .nk-header-news .nk-news-list {
        width: 100% !important;
    }

    .nk-header-wrap .nk-header-news .ct-aliados-row {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        gap: .6rem;
    }

    .nk-header-wrap .nk-header-news .ct-marquee {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* (Opcional) Compactar un poco para que entren más sin afectar mobile */
    .nk-header-wrap .nk-header-news .ct-marquee-item {
        font-size: .82rem;
        padding: .22rem .55rem;
    }
}
@media (min-width:1200px) {

    /* 1) “Marco” del header: crea margen real al borde derecho */
    .nk-header.nk-header-fixed > .container-fluid {
        padding-right: 0.5cm !important; /* o 24px si preferís */
    }

    /* 2) Asegura que la zona derecha esté al final */
    .nk-header-wrap .nk-header-tools {
        margin-left: auto !important;
    }

        /* 3) Evita saltos de línea en botón */
        .nk-header-wrap .nk-header-tools .btn {
            white-space: nowrap !important;
        }

        .nk-header-wrap .nk-header-tools .nk-quick-nav {
            flex-wrap: nowrap !important;
        }
}