/* 
==============================================
   Theme Bajaj Carrera Motos
   Aplicación de variables a componentes específicos
==============================================
*/

/* No necesitamos redefinir las variables porque ya están en theme-vars.css */

/* General styling updates */
body {
  color: var(--text-dark);
  background: var(--background-light);
  font-family: var(--font-main);
}

/* Links and text highlights */
a {
  color: var(--clr-primary);
  transition: color var(--transition-normal);
}

a:hover, a:focus {
  color: var(--clr-primary-hover);
}

/* Buttons */
.btn-primary {
  background: var(--clr-primary);
  color: var(--text-light);
  border: none;
  border-radius: var(--border-radius-md);
  padding: 0.8rem 2rem;
  transition: all var(--transition-normal);
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--clr-primary-hover);
  color: var(--text-light);
  box-shadow: var(--shadow-btn);
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
  background: transparent;
  border-radius: var(--border-radius-md);
  padding: 0.8rem 2rem;
  transition: all var(--transition-normal);
}

.btn-outline:hover, .btn-outline:focus {
  background: var(--clr-primary);
  color: var(--text-light);
  box-shadow: var(--shadow-btn);
  transform: translateY(-2px);
}

/* Navigation */
.navbar-pc {
  background-color: var(--clr-light);
  box-shadow: var(--shadow-sm);
}

.navbar-pc ul li a {
  color: var(--clr-dark);
  transition: color var(--transition-normal);
}

.navbar-pc ul li a:hover, 
.navbar-pc ul li a:focus {
  color: var(--clr-primary);
}

.navbar-pc ul ul {
  background-color: var(--clr-dark);
  border-radius: var(--border-radius-sm);
}

.navbar-pc ul ul li a {
  color: var(--text-light);
}

.navbar-pc ul ul li a:hover {
  background-color: var(--clr-primary);
}

.navbar-pc.scrolled {
  background-color: var(--clr-light);
}

/* Hero and Feature Sections */
.hero-section {
  background: var(--gradient-hero);
}

.feature-section {
  background-color: var(--background-light);
  padding: var(--spacing-xl) 0;
}

.divider {
  background: linear-gradient(90deg, transparent 0%, var(--clr-primary) 50%, transparent 100%);
  height: 3px;
  margin: var(--spacing-md) 0;
}

/* Product cards */
.product-card {
  background-color: var(--background-light);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  border: 1px solid rgba(0,0,0,0.05);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.product-card .btn {
  background-color: var(--clr-primary);
  color: var(--text-light);
  border-radius: var(--border-radius-md);
}

.product-specs li:before {
  color: var(--clr-primary);
}

/* Footer */
.footer {
  background-color: var(--clr-secondary);
  color: var(--text-light);
  padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.footer a {
  color: #cccccc;
  transition: color var(--transition-fast);
}

.footer a:hover {
  color: var(--clr-primary);
}

.footer-bottom {
  background-color: var(--clr-dark);
  padding: var(--spacing-md) 0;
}

/* Accents and highlights */
.highlight, 
.accent-color {
  color: var(--clr-primary);
}

/* Estos estilos están definidos ya en theme-vars.css como clases utilitarias
.bg-primary { background-color: var(--clr-primary)!important; }
.bg-secondary { background-color: var(--clr-secondary)!important; }
.border-primary { border-color: var(--clr-primary)!important; }
*/

/* Active states */
.active, 
.current {
  color: var(--clr-primary)!important;
}

/* Tabs */
.tabs-nav .active {
  color: var(--clr-primary);
  border-bottom: 3px solid var(--clr-primary);
}

/* Secciones con gradientes */
.testimonial-section,
.cta-section {
  background: var(--gradient-cta);
  color: var(--text-light);
  padding: var(--spacing-xl) 0;
}

/* Botón oscuro */
.btn-dark {
  background-color: var(--clr-secondary);
  color: var(--text-light);
  border-radius: var(--border-radius-md);
  padding: 0.8rem 2rem;
  transition: all var(--transition-normal);
}

.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--clr-secondary-hover);
  color: var(--text-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,32,74,0.3);
}

/* Estos estilos están definidos ya en theme-vars.css como clases utilitarias
.text-primary { color: var(--clr-primary)!important; }
.text-secondary { color: var(--clr-secondary)!important; }
*/