/* ==========================================================================
   MARKETNEWS: MÓDULOS FINANCIEROS (MODERNIZADO)
   ========================================================================== */

/* --- 1. Ticker Financiero (Clean Terminal Look) --- */
.market-ticker-wrapper { 
    border-bottom: 1px solid #f0f0f0; 
    background-color: #ffffff;
    height: 44px; 
    overflow: hidden; 
    position: relative; 
    display: flex; 
    align-items: center; 
}
.market-ticker-track { 
    display: flex; 
    white-space: nowrap; 
    animation: tickerScroll 35s linear infinite; 
    padding-left: 2rem; 
}
.market-ticker-wrapper:hover .market-ticker-track { 
    animation-play-state: paused; 
}
.market-ticker-item { 
    color: #4b5563 !important; 
    font-size: 0.95rem; 
    font-weight: 500;
    text-decoration: none; 
    margin-right: 3rem; 
    display: flex; 
    align-items: center; 
    transition: color 0.2s ease; 
}
.market-ticker-item:hover { 
    color: #004b87 !important; 
}

/* Indicadores visuales minimalistas para el Ticker */
.ticker-badge { 
    border-radius: 50%; 
    margin-right: 0.6rem; 
    width: 10px; 
    height: 10px; 
    display: inline-block;
    flex-shrink: 0;
}
.t-badge-riesgo { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
.t-badge-oportunidad { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
.t-badge-tendencia { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); }

@keyframes tickerScroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
@media (max-width: 768px) {
    .market-ticker-wrapper { height: 40px; }
    @keyframes tickerScroll {
        0%   { transform: translateX(100%); }
        100% { transform: translateX(-150%); }
    }
}

/* --- 2. Tarjetas Globales y Tipo de Cambio --- */
.market-card { 
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.015) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.market-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important; 
}
.text-marketnews { 
    color: #112240 !important; 
    font-size: 1.15rem !important; 
    font-weight: 800; 
    letter-spacing: -0.3px;
}

/* Botón Histórico Modernizado */
.historico { 
    font-size: 0.8rem; 
    font-weight: 700;
    color: #004b87; 
    background: #f0f4f8;
    text-decoration: none; 
    display: inline-flex; 
    align-items: center;
    gap: 5px;
    padding: 6px 12px; 
    border-radius: 8px; 
    transition: all 0.3s ease; 
}
.historico:hover { 
    background: #8bc34a; 
    color: #ffffff !important; 
}

/* --- 3. Sliders Verticales (Metales y Macro) --- */
.vertical-slider-viewport { 
    height: 120px; 
    overflow: hidden; 
    position: relative; 
    /* Efecto fade en los bordes top/bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.vertical-slider-track { 
    display: flex; 
    flex-direction: column; 
    animation: scrollVertical 15s linear infinite; 
}
.vertical-slider-viewport:hover .vertical-slider-track { 
    animation-play-state: paused; 
}
@keyframes scrollVertical { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-50%); } 
}
.vertical-item { 
    height: 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 0; 
    border-bottom: 1px solid #f3f4f6;
}
.vertical-item:last-child { border-bottom: none; }

/* Colores de tendencia para Metales y Macro */
.trend-up { color: #10b981 !important; }
.trend-down { color: #ef4444 !important; }
.bg-trend-up { background-color: #10b981 !important; }
.bg-trend-down { background-color: #ef4444 !important; }


    /* ==========================================================================
       ESTILOS PARA GRILLAS Y ARTÍCULOS (PARTE 2)
       ========================================================================== */
    .section-tittle h1, .section-tittle h2, .section-tittle p span {
        font-size: 2rem !important;
        font-weight: 800;
        color: #112240;
        position: relative;
        padding-bottom: 12px;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: -0.5px;
    }
    .section-tittle h1::after, .section-tittle h2::after, .section-tittle p span::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px;
        height: 4px;
        background-color: #8bc34a; 
        border-radius: 2px;
    }

    .single-baner-nw2 {
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-radius: 16px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .single-baner-nw2:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }
    .banner-img-cap2 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .banner-img {
        overflow: hidden;
        aspect-ratio: 16/10;
        background-color: #f7f9fc;
    }
    .banner-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .single-baner-nw2:hover .banner-img img {
        transform: scale(1.05);
    }
    .banner-cap2 {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    /* Tipografía Solicitada (Títulos 1.4rem, Descripción 1.2rem) */
    .banner-cap2 h3 a, 
    .banner-cap2 h4 a, 
    .single-job-items h3,
    .single-job-items h3 a {
        font-size: 1.4rem !important; 
        font-weight: 700;
        color: #112240;
        line-height: 1.35;
        text-decoration: none;
        transition: color 0.2s ease;
        display: block;
        margin-bottom: 12px;
    }
    .banner-cap2 h3 a:hover, 
    .banner-cap2 h4 a:hover, 
    .single-job-items a:hover h3 {
        color: #004b87 !important; 
    }

    .banner-cap2 p, 
    .single-job-items p,
    .banner-cap2 p:last-child {
        font-size: 1.2rem !important; 
        color: #5a6b82;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .genric-btn.info-border, .genric-btn.info-border a {
        border: none !important;
        background: #f0f4f8;
        color: #004b87 !important;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.8rem !important;
        font-weight: 700;
        margin-bottom: 12px;
        display: inline-block;
        transition: background 0.3s, color 0.3s;
        text-transform: uppercase;
    }
    .genric-btn.info-border:hover, .genric-btn.info-border a:hover {
        background: #004b87;
        color: #ffffff !important;
    }
    
    
/* =========================
   SKYSCRAPER ADS
========================= */

.skyscraper-left,
.skyscraper-right {
    position: fixed;
    top: 120px;
    width: 160px;
    z-index: 30;
    
    max-height: calc(100vh - 140px);
    overflow: hidden;
}

.skyscraper-left {
    left: 10px;
}

.skyscraper-right {
    right: 10px;
}

/* Ocultar en pantallas pequeñas */
@media (max-width: 1600px) {
    .skyscraper-left,
    .skyscraper-right {
        display: none;
    }
}