/* Estilos para marquee_titles.php */
.marquee-carousel {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin: 0px auto;
    background: rgba(0,0,0,0.35);
    padding: 2px 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.marquee-track { width:100%; display:flex; align-items:center; justify-content:center; }
.marquee-item { display:none; align-items:center; gap:10px; opacity:0; transform: translateX(20px); transition: opacity 400ms ease, transform 400ms ease; }
.marquee-item.active { display:flex; opacity:1; transform: translateX(0); }
.marquee-thumb { width:48px; height:48px; border-radius:6px; object-fit:cover; border:2px solid rgba(255,255,255,0.1); transition: transform 300ms ease; }

/* animate thumbnail slightly to the left while the item is active (one run per display) */
@keyframes slideLeft {
    0% { transform: translateX(0); }
    40% { transform: translateX(-10px); }
    80% { transform: translateX(0); }
    100% { transform: translateX(0); }
}
.marquee-item.active .marquee-thumb { animation: slideLeft 4s ease-in-out 1; }

.marquee-text { color:#fff; display:flex; flex-direction:column; }
.marquee-title { font-weight:700; font-size:14px; white-space:normal; word-break:break-word; line-height:1.15; max-width:calc(100% - 60px); }
.marquee-sub { font-size:12px; color:#ddd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.marquee-controls { position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:6px; }
.m-prev, .m-next { background:rgba(0,0,0,0.5); color:#fff; border:0; padding:4px 8px; border-radius:4px; cursor:pointer; }
@media (max-width:480px) {
    .marquee-carousel { padding:6px 12px; }
    .marquee-thumb { width:36px; height:36px; }
    .marquee-title { font-size:13px; max-width:calc(100% - 48px); }
    .marquee-sub { font-size:11px; max-width:160px; }
    .marquee-carousel, .marquee-wrapper { margin-top: 0px; padding-top: 0px; }
}

/* Enlaces del marquee deben verse como texto normal (sin subrayado ni cambio de color) */
.marquee-link {
    color: inherit; /* hereda el color del contenedor */
    text-decoration: none; /* sin subrayado */
    font-weight: 700;
    transition: none; /* sin transición que delate que es enlace */
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Evitar que el hover cambie visiblemente el enlace */
.marquee-link:hover, .marquee-link:focus {
    color: inherit;
    background: transparent;
    text-decoration: none;
}

/* Mantener el separador y otros estilos intactos */