:root {
    /* Colores principales personalizados */
    --bs-primary: #DC3545;
    --bs-secondary: #DBE6F0;
    --bs-light: #F8F9FA;
    --bs-dark: #C6C7C8;
    
    /* Colores de estado personalizados */
    --bs-success: #198754;
    --bs-info: #0DCAF0;
    --bs-warning: #FFC107;
    --bs-danger: #DC3545;
    
    /* RGB del primary para focus states */
    --bs-primary-rgb: 220, 53, 69;
    
    /* Colores específicos del diseño */
    --color-gradient-features: rgba(220, 53, 69, 0.5);
    --color-overlay-lifestyle: rgba(0, 0, 0, 0.3);
    --color-modal-background: rgba(255, 255, 255, 0.8);
}

/* Actualizar gradientes que usan el color primary */
.features {
    background: linear-gradient(rgba(220, 53, 69, 0.5), rgba(255, 255, 255, 0.3)), url(../img/golden.jpg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
}

.banner-content-2 {
    background: linear-gradient(rgba(220, 53, 69, 0.5), rgba(255, 255, 255, 0.7)) !important;
}

/* Asegurar que los elementos usen las variables CSS */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 0.9;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Actualizar otros elementos que usan primary */
.link-hover:hover {
    color: var(--bs-primary) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary) !important;
}

.topbar .top-link a small:hover i {
    color: var(--bs-primary) !important;
}

.topbar-news-text:hover {
    color: var(--bs-primary) !important;
}

.topbar-news-img {
    border-color: var(--bs-primary) !important;
}

.footer button:hover {
    color: var(--bs-primary) !important;
}

.footer .footer-item-1 a:hover i,
.footer .footer-item-2 a:hover,
.footer .footer-item-3 a:hover {
    color: var(--bs-primary) !important;
}

/* ============================================
   HOVER STATES PARA TÍTULOS Y ENLACES
   ============================================ */

/* Títulos que son enlaces - hover con color primary */
a.h1:hover,
a.h2:hover,
a.h3:hover,
a.h4:hover,
a.h5:hover,
a.h6:hover,
a.display-4:hover,
a.display-5:hover,
a.display-6:hover {
    color: var(--bs-primary) !important;
    transition: color 0.3s ease;
}

/* Títulos específicos de noticias */
a.latest-news-title:hover,
a.featured-title:hover,
a.most-viewed-title:hover,
a.features-title:hover {
    color: var(--bs-primary) !important;
    transition: color 0.3s ease;
}

/* Enlaces dentro de tarjetas de noticias */
.card a:hover,
.card-body a:hover,
.news-item a:hover {
    color: var(--bs-primary) !important;
}

/* Enlaces en sidebar */
.sidebar a:hover,
.sidebar a.h6:hover {
    color: var(--bs-primary) !important;
}

/* Enlaces en sección Top Story */
.top-story a:hover,
.top-story a.h3:hover {
    color: var(--bs-primary) !important;
}

/* Enlaces en sección What's New */
.whats-new a:hover,
.populer-news a:hover,
.populer-news a.h4:hover,
.populer-news a.h6:hover {
    color: var(--bs-primary) !important;
}

/* Enlaces en Lifestyle */
.lifestyle a:hover,
.lifestyle a.h4:hover {
    color: var(--bs-primary) !important;
}

/* Todos los enlaces de texto oscuro al hover */
a.text-dark:hover,
a.text-body:hover {
    color: var(--bs-primary) !important;
}

/* Enlaces en badges y etiquetas */
.badge a:hover,
.tag a:hover {
    color: var(--bs-primary) !important;
}

/* Botones outline al hover */
.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Links de Bootstrap con colores */
a.link-primary:hover {
    color: var(--bs-primary) !important;
    opacity: 0.8;
}

/* Active states */
.nav-pills .nav-link.active,
.tab-class .nav-item a.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Focus states */
.btn-primary:focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Hover states mejorados para todos los enlaces */
a:hover {
    transition: color 0.3s ease;
}

/* Asegurar que todos los títulos como enlaces usen primary en hover */
a.h1,
a.h2,
a.h3,
a.h4,
a.h5,
a.h6 {
    transition: color 0.3s ease;
}

/* Badges en bloque "Lo Nuevo" - texto blanco */
.populer-news .bg-primary,
.populer-news .whats-new-main-image-container .bg-primary {
    color: #ffffff !important;
}

.populer-news .bg-primary *,
.populer-news .whats-new-main-image-container .bg-primary * {
    color: #ffffff !important;
}

/* ============================================
   BLOQUES DE REDES SOCIALES "MANTENTE CONECTADO"
   Colores oficiales de cada red social
   ============================================ */

/* Asegurar que los botones de redes sociales mantengan sus colores */
.social-button-custom {
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.social-button-custom:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Iconos negros en botones de redes sociales */
.social-button-custom .btn-light i,
.social-button-custom i.btn-light,
.social-button-custom .btn.btn-light {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.social-button-custom .btn-light i.fab,
.social-button-custom .btn-light i.fa-brands,
.social-button-custom i.fab,
.social-button-custom i.fa-brands {
    color: #000000 !important;
}

/* Texto blanco en botones de redes sociales */
.social-button-custom .text-white,
.social-button-custom span.text-white {
    color: #ffffff !important;
}