/* =====================================================
   PALETA BIOMODELOS – CONTRASTE v3.2
   ===================================================== */
:root {
  --vk-navy:        #0B3C55;   /* tono logo / textos primarios */
  --vk-navy-dark:   #082A3C;   /* fondo menú y footer */
  --vk-navy-light:  #E1F2F6;   /* header claro, newsletter */
  --vk-teal:        #117A93;   /* botones primarios */
  --vk-accent:      #20B2C9;   /* hover, detalles */
  --vk-red:         #C62B2B;   /* CTA, precios */
  --vk-red-hover:   #A02020;
  --vk-gray:        #2F556D;   /* tarjetas, sidebar */
  --vk-light-gray:  #F6FBFC;   /* secciones claras */
  --vk-border:      #2A5B78;
  --vk-white:       #ffffff;

  /* alias históricos del tema */
  --vk-dark-gray:   var(--vk-navy-dark);
  --vk-mint:        var(--vk-navy-light);
  --vk-black:       var(--vk-navy);
  --default-text-color: var(--vk-navy);
}

/* =====================================================
   BASE
   ===================================================== */
html,body{
  background: var(--vk-dark-gray);
  color: var(--default-text-color);
  font-family: 'Montserrat', sans-serif;
}

/* =====================================================
   HEADER SUPERIOR (logo + buscador)
   ===================================================== */
#header,.header-top{
  background: var(--vk-navy-light);
  color: var(--vk-navy);
  border-bottom: 4px solid var(--vk-navy);
}
#header .logo img{max-height:64px;}

#header .searchbox input{
  background: var(--vk-white);
  border: 1px solid var(--vk-border);
  color: var(--vk-navy);
}
#header .searchbox input::placeholder{color:#8AA7B6;}

/* =====================================================
   MENÚ PRINCIPAL
   ===================================================== */
.navigation,
.navbar,
#main-menu,
#site-menu{
  background: var(--vk-navy-dark);
}

/* enlaces en la barra principal (blancos) */
.navigation a,
.navbar a,
#main-menu a,
#site-menu a{
  color: var(--vk-white) !important;
  font-weight: 600;
  text-decoration: none;
}
.navigation a:hover,
.navbar a:hover,
#main-menu a:hover,
#site-menu a:hover{
  color: var(--vk-accent) !important;
}

/* =====================================================
   SUBMENÚ/DROPDOWN – fondo BLANCO, texto AZUL MARINO
   ===================================================== */
.dropdown-menu{
  background: var(--vk-white);
  border: 1px solid var(--vk-border);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* **** FIX CONTRASTE: enlaces dentro del dropdown **** */
.navbar .dropdown-menu .nav-link,
.navigation .dropdown-menu .nav-link,
.dropdown-menu a{
  color: var(--vk-navy) !important;         /* ← AZUL MARINO */
}
.navbar .dropdown-menu .nav-link:hover,
.navigation .dropdown-menu .nav-link:hover,
.dropdown-menu a:hover{
  background: var(--vk-accent) !important;
  color: var(--vk-white) !important;
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb{
  background: var(--vk-light-gray);
  border: 1px solid var(--vk-border);
  color: var(--vk-navy);
}
.breadcrumb a{color: var(--vk-teal);}
.breadcrumb a:hover{color: var(--vk-red);}

/* =====================================================
   BOTONES
   ===================================================== */
.btn-primary{
  background: var(--vk-teal);
  color: var(--vk-white);
  border: none;
}
.btn-primary:hover{background: var(--vk-accent);}

/* =====================================================
   TARJETAS
   ===================================================== */
.card{
  background: var(--vk-gray);
  color: var(--vk-white);
  border: 1px solid var(--vk-border);
  transition: .2s;
}
.card:hover{border-color: var(--vk-teal);transform: scale(1.02);}
.card-title{color: var(--vk-white);font-weight: 600;}

/* ---- Cabeceras de tarjeta blancas ---- */
.card-header{
  background: var(--vk-navy-dark);
  border-bottom: 1px solid var(--vk-border);
  color: var(--vk-white) !important;
}
.card-header .card-title,
.card-header .card-titl{          /* incluimos posible typo */
  color: var(--vk-white) !important;
}
/* bloque Browse By Category usa la misma cabecera */
#box-categories .card-header{background: var(--vk-navy-dark) !important;}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar,
.category-menu{
  background: var(--vk-gray);
  color: var(--vk-white);
}
.sidebar li,
.category-menu li{color: var(--vk-white) !important;}
.sidebar li:hover{background: var(--vk-accent);color: var(--vk-white) !important;}
.sidebar li.active{background: var(--vk-light-gray);color: var(--vk-navy) !important;}

/* =====================================================
   PRODUCTOS
   ===================================================== */
.product .name,
.product .manufacturer{color: var(--vk-navy) !important;}
.product .price{color: var(--vk-red) !important;}

/* =====================================================
   NEWSLETTER BOX
   ===================================================== */
#newsletter,
.newsletter-box{
  background: var(--vk-navy-light);
  color: var(--vk-navy);
  border: 1px solid var(--vk-border);
  border-radius: 8px;
}
#newsletter input[type=email]{
  background: var(--vk-white);
  border: 1px solid var(--vk-border);
  color: var(--vk-navy);
}
#newsletter .btn{background: var(--vk-teal);color: var(--vk-white);}
#newsletter .btn:hover{background: var(--vk-accent);}

/* =====================================================
   FOOTER
   ===================================================== */
footer.footer,
#footer{
  background: var(--vk-navy-dark);
  color: var(--vk-light-gray);
  border-top: 4px solid var(--vk-teal);
  padding-top: 2rem;
}
footer.footer h1, footer.footer h2,
footer.footer h3, footer.footer h4,
#footer h1, #footer h2, #footer h3, #footer h4{
  color: var(--vk-white) !important;       /* títulos blancos */
}
footer.footer a, #footer a{color: var(--vk-light-gray);}
footer.footer a:hover, #footer a:hover{color: var(--vk-accent);}
.footer-bottom, #footer-bottom{
  background: #061A25;
  color: var(--vk-light-gray);
}

/* =====================================================
   FIJES VARIOS
   ===================================================== */
.listing.categories .name{color: var(--vk-navy) !important;}
#box-category .form-control[data-toggle="dropdown"]{
  color: var(--vk-navy) !important;
}

/* 🔵 SOLO los links dentro de #site-menu > .dropdown-menu */
nav#site-menu .dropdown-menu a.nav-link,
nav#site-menu .dropdown-menu a.dropdown-item {   /* por si usas .dropdown-item */
  color: #00338d !important;                     /* azul oscuro deseado */
}

/* Estados hover / activo */
nav#site-menu .dropdown-menu a.nav-link:hover,
nav#site-menu .dropdown-menu a.nav-link:focus,
nav#site-menu .dropdown-menu a.nav-link.active,
nav#site-menu .dropdown-menu a.dropdown-item:hover,
nav#site-menu .dropdown-menu a.dropdown-item:focus,
nav#site-menu .dropdown-menu .active > a.dropdown-item {
  color: #002468 !important;                     /* tono un poco más intenso */
}

/* === Scroll‑up icon (más claro) === */
#scroll-up i{
  color: var(--vk-accent) !important;   /* turquesa luminoso */
  transition: color .2s;
}
#scroll-up:hover i{
  color: var(--vk-white) !important;    /* blanco al hover */
}
/* Solo el encabezado del bloque Newsletter */
#box-newsletter-subscribe .card-body S{
  color: #ffffff !important;   /* blanco puro */
}

/* === 1. Títulos .title (Galeria, etc.) en blanco  === */
h1.title, h2.title, h3.title{
  color: var(--vk-white) !important;
}

/* === 2. Pestañas tipo nav‑pills: texto blanco por defecto === */
.nav-pills > li > a{
  color: var(--vk-white) !important;      /* enlaces blancos */
}
.nav-pills > li > a:hover,
.nav-pills > li.active > a,
.nav-pills > li.open > a{
  color: var(--vk-accent) !important;     /* turquesa al hover/activo */
}
/* =====================================================
   OFF‑CANVAS OSCURO (hamburger abierto)
   ===================================================== */
#offcanvas,
.offcanvas{
  background: var(--vk-navy-dark) !important;  /* fondo azul marino oscuro */
  color: var(--vk-white) !important;
}

/* Cabecera del off‑canvas (barra con “Biomodelos” y X) */
.offcanvas-header{
  background: var(--vk-navy-dark) !important;
  border-bottom: 1px solid var(--vk-border);
  color: var(--vk-white) !important;
}
.offcanvas-header .btn,
.offcanvas-header .btn i{
  color: var(--vk-white) !important;           /* icono cerrar blanco */
}

/* Enlaces dentro del menú lateral */
.offcanvas-body .nav-link,
.offcanvas .navbar-nav .nav-link{
  color: var(--vk-white) !important;           /* texto blanco por defecto */
}

/* ===== Encabezados de páginas estáticas ===== */
#box-contact-us h1{
  color: var(--vk-white) !important;   /* “Contacto” (h1) */
}

#box-page h2,
#box-page #main h2{
  color: var(--vk-white) !important;   /* “Quiénes Somos” (h2) */
}