/**
 * GRUPO VÍA MOTOS - Brand Themes
 * Sistema de temas dinámicos por marca
 * Paletas de colores corporativos de cada marca
 * 
 * @version 1.0
 * @date Diciembre 2024
 */

/* ============================================
   TEMA BASE - KTM (Default)
   ============================================ */
:root,
body[data-brand="ktm"] {
    /* Colores primarios KTM - Naranja KTM Oficial */
    --color-primary: #F2771A;
    --color-primary-dark: #F46400;
    --color-primary-light: #FF8533;
    --color-primary-rgb: 242, 119, 26;
    
    /* Colores secundarios KTM - Negro */
    --color-secondary: #1C1919;
    --color-secondary-dark: #000000;
    --color-secondary-light: #333333;
    --color-secondary-rgb: 28, 25, 25;
    
    /* Color terciario KTM - Plateado */
    --color-tertiary: #C0C0C0;
    --color-tertiary-dark: #A0A0A0;
    --color-tertiary-light: #E0E0E0;
    
    /* Colores de acento */
    --color-accent: #F2771A;
    --color-accent-hover: #FF8533;
    
    /* Gradientes de marca */
    --gradient-primary: linear-gradient(135deg, #F2771A 0%, #F46400 100%);
    --gradient-secondary: linear-gradient(135deg, #1C1919 0%, #000000 100%);
    --gradient-hero: linear-gradient(135deg, rgba(242, 119, 26, 0.1) 0%, rgba(242, 119, 26, 0.05) 100%);
    
    /* Sombras con color de marca */
    --shadow-brand: 0 4px 12px rgba(242, 119, 26, 0.15);
    --shadow-brand-lg: 0 8px 24px rgba(242, 119, 26, 0.2);
    
    /* Nombre de marca */
    --brand-name: 'KTM';
}

/* ============================================
   TEMA HUSQVARNA - Colores Suecos
   ============================================ */
body[data-brand="husqvarna"] {
    /* Colores primarios Husqvarna - Azul Oscuro */
    --color-primary: rgb(39, 58, 96);
    --color-primary-dark: rgb(29, 48, 86);
    --color-primary-light: rgb(49, 68, 106);
    --color-primary-rgb: 39, 58, 96;
    
    /* Colores secundarios Husqvarna - Azul Sueco */
    --color-secondary: #005AAB;
    --color-secondary-dark: #004080;
    --color-secondary-light: #0066CC;
    --color-secondary-rgb: 0, 90, 171;
    
    /* Color terciario Husqvarna - Blanco */
    --color-tertiary: #FFFFFF;
    --color-tertiary-dark: #F5F5F5;
    --color-tertiary-light: #FFFFFF;
    
    /* Colores de acento */
    --color-accent: rgb(39, 58, 96);
    --color-accent-hover: rgb(49, 68, 106);
    
    /* Gradientes de marca */
    --gradient-primary: linear-gradient(135deg, rgb(39, 58, 96) 0%, rgb(29, 48, 86) 100%);
    --gradient-secondary: linear-gradient(135deg, #005AAB 0%, #004080 100%);
    --gradient-hero: linear-gradient(135deg, rgba(39, 58, 96, 0.1) 0%, rgba(39, 58, 96, 0.05) 100%);
    
    /* Sombras con color de marca */
    --shadow-brand: 0 4px 12px rgba(39, 58, 96, 0.2);
    --shadow-brand-lg: 0 8px 24px rgba(39, 58, 96, 0.25);
    
    /* Nombre de marca */
    --brand-name: 'Husqvarna';
}

/* ============================================
   TEMA HONDA - Honda Red (PMS 485 C)
   ============================================ */
body[data-brand="honda"] {
    /* Colores primarios Honda - Honda Red Oficial */
    --color-primary: #CC0000;
    --color-primary-dark: #990000;
    --color-primary-light: #E60000;
    --color-primary-rgb: 204, 0, 0;
    
    /* Colores secundarios Honda - Negro */
    --color-secondary: #000000;
    --color-secondary-dark: #1A1A1A;
    --color-secondary-light: #333333;
    --color-secondary-rgb: 0, 0, 0;
    
    /* Color terciario Honda - Blanco */
    --color-tertiary: #FFFFFF;
    --color-tertiary-dark: #F5F5F5;
    --color-tertiary-light: #FFFFFF;
    
    /* Colores de acento */
    --color-accent: #CC0000;
    --color-accent-hover: #E60000;
    
    /* Gradientes de marca */
    --gradient-primary: linear-gradient(135deg, #CC0000 0%, #990000 100%);
    --gradient-secondary: linear-gradient(135deg, #000000 0%, #1A1A1A 100%);
    --gradient-hero: linear-gradient(135deg, rgba(204, 0, 0, 0.1) 0%, rgba(204, 0, 0, 0.05) 100%);
    
    /* Sombras con color de marca */
    --shadow-brand: 0 4px 12px rgba(204, 0, 0, 0.15);
    --shadow-brand-lg: 0 8px 24px rgba(204, 0, 0, 0.2);
    
    /* Nombre de marca */
    --brand-name: 'Honda';
    
    /* Pantone: PMS 485 C */
    /* CMYK: (13, 100, 100, 4) */
}

/* ============================================
   TEMA AKT - Marca Colombiana
   ============================================ */
body[data-brand="akt"] {
    /* Colores primarios AKT - Azul Oscuro */
    --color-primary: rgb(0, 63, 109);
    --color-primary-dark: rgb(0, 53, 99);
    --color-primary-light: rgb(0, 73, 119);
    --color-primary-rgb: 0, 63, 109;
    
    /* Colores secundarios AKT - Peacock Blue (Azul Pavorreal) */
    --color-secondary: #005AAB;
    --color-secondary-dark: #004080;
    --color-secondary-light: #0066CC;
    --color-secondary-rgb: 0, 90, 171;
    
    /* Color terciario AKT - Plateado */
    --color-tertiary: #C0C0C0;
    --color-tertiary-dark: #A0A0A0;
    --color-tertiary-light: #E0E0E0;
    
    /* Color cuaternario AKT - Blanco */
    --color-quaternary: #FFFFFF;
    
    /* Color adicional - Pale Rose */
    --color-pale-rose: #FAC5C7;
    
    /* Colores de acento */
    --color-accent: rgb(0, 63, 109);
    --color-accent-hover: rgb(0, 73, 119);
    
    /* Gradientes de marca */
    --gradient-primary: linear-gradient(135deg, rgb(0, 63, 109) 0%, rgb(0, 53, 99) 100%);
    --gradient-secondary: linear-gradient(135deg, #005AAB 0%, #004080 100%);
    --gradient-hero: linear-gradient(135deg, rgba(0, 63, 109, 0.1) 0%, rgba(0, 63, 109, 0.05) 100%);
    
    /* Sombras con color de marca */
    --shadow-brand: 0 4px 12px rgba(0, 63, 109, 0.15);
    --shadow-brand-lg: 0 8px 24px rgba(0, 63, 109, 0.2);
    
    /* Nombre de marca */
    --brand-name: 'AKT';
}

/* ============================================
   TEMA VÍA MOTOS - Dealership Corporativo
   ============================================ */
body[data-brand="viamotos"] {
    /* Colores primarios Vía Motos - Negro Corporativo */
    --color-primary: #000000;
    --color-primary-dark: #000000;
    --color-primary-light: #333333;
    --color-primary-rgb: 0, 0, 0;
    
    /* Colores secundarios Vía Motos - Gris */
    --color-secondary: #666666;
    --color-secondary-dark: #444444;
    --color-secondary-light: #999999;
    --color-secondary-rgb: 102, 102, 102;
    
    /* Color terciario Vía Motos - Blanco */
    --color-tertiary: #FFFFFF;
    --color-tertiary-dark: #F5F5F5;
    --color-tertiary-light: #FFFFFF;
    
    /* Colores de acento */
    --color-accent: #000000;
    --color-accent-hover: #333333;
    
    /* Gradientes de marca */
    --gradient-primary: linear-gradient(135deg, #000000 0%, #333333 100%);
    --gradient-secondary: linear-gradient(135deg, #666666 0%, #444444 100%);
    --gradient-hero: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
    
    /* Sombras con color de marca */
    --shadow-brand: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-brand-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* Nombre de marca */
    --brand-name: 'Vía Motos';
}

/* Personalización específica para Vía Motos */
body[data-brand="viamotos"] .hero-title,
body[data-brand="viamotos"] h1 {
    background: linear-gradient(135deg, #000 0%, #333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-brand="viamotos"] .btn-primary,
body[data-brand="viamotos"] button[type="submit"] {
    background: linear-gradient(135deg, #000000 0%, #2b2b2b 100%);
    border-color: #000000;
    color: #FFFFFF;
}

body[data-brand="viamotos"] .navbar {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

body[data-brand="viamotos"] .footer {
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
    border-top: 3px solid #666666;
}

body[data-brand="viamotos"] .cta-section {
    background: linear-gradient(135deg, #000000 0%, #2b2b2b 100%);
}

/* ============================================
   TRANSICIONES Y ANIMACIONES
   ============================================ */

/* Transición suave al cambiar de marca */
body[data-brand-changing="true"] * {
    transition: background-color 0.4s ease, 
                color 0.4s ease, 
                border-color 0.4s ease, 
                box-shadow 0.4s ease,
                fill 0.4s ease,
                stroke 0.4s ease !important;
}

/* ============================================
   PERSONALIZACIÓN GLOBAL POR MARCA
   ============================================ */

/* Navbar personalizado por marca */
body[data-brand="ktm"] .navbar {
    background: linear-gradient(135deg, rgba(242, 119, 26, 0.05) 0%, rgba(242, 119, 26, 0.02) 100%);
    border-bottom: 2px solid rgba(242, 119, 26, 0.2);
}

body[data-brand="husqvarna"] .navbar {
    background: linear-gradient(135deg, rgba(255, 239, 0, 0.08) 0%, rgba(255, 239, 0, 0.03) 100%);
    border-bottom: 2px solid rgba(255, 239, 0, 0.3);
}

body[data-brand="honda"] .navbar {
    background: linear-gradient(135deg, rgba(204, 0, 0, 0.05) 0%, rgba(204, 0, 0, 0.02) 100%);
    border-bottom: 2px solid rgba(204, 0, 0, 0.2);
}

body[data-brand="akt"] .navbar {
    background: linear-gradient(135deg, rgba(237, 28, 36, 0.05) 0%, rgba(237, 28, 36, 0.02) 100%);
    border-bottom: 2px solid rgba(237, 28, 36, 0.2);
}

/* Footer personalizado por marca */
body[data-brand="ktm"] .footer {
    background: linear-gradient(180deg, #1C1919 0%, #000000 100%);
    border-top: 3px solid #F2771A;
}

body[data-brand="husqvarna"] .footer {
    background: linear-gradient(180deg, #005AAB 0%, #004080 100%);
    border-top: 3px solid #FFEF00;
}

body[data-brand="honda"] .footer {
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
    border-top: 3px solid #CC0000;
}

body[data-brand="akt"] .footer {
    background: linear-gradient(180deg, #005AAB 0%, #004080 100%);
    border-top: 3px solid #ED1C24;
}

/* Botones primarios */
body[data-brand="ktm"] .btn-primary,
body[data-brand="ktm"] button[type="submit"] {
    background: linear-gradient(135deg, #F2771A 0%, #F46400 100%);
    border-color: #F2771A;
    color: #FFFFFF;
}

body[data-brand="husqvarna"] .btn-primary,
body[data-brand="husqvarna"] button[type="submit"] {
    background: linear-gradient(135deg, #FFEF00 0%, #E5D700 100%);
    border-color: #FFEF00;
    color: #005AAB;
}

body[data-brand="honda"] .btn-primary,
body[data-brand="honda"] button[type="submit"] {
    background: linear-gradient(135deg, #CC0000 0%, #990000 100%);
    border-color: #CC0000;
    color: #FFFFFF;
}

body[data-brand="akt"] .btn-primary,
body[data-brand="akt"] button[type="submit"] {
    background: linear-gradient(135deg, #ED1C24 0%, #C01018 100%);
    border-color: #ED1C24;
    color: #FFFFFF;
}

/* Enlaces activos en navbar */
body[data-brand="ktm"] .nav-link.active,
body[data-brand="ktm"] .nav-link:hover {
    color: #F2771A;
    border-bottom-color: #F2771A;
}

body[data-brand="husqvarna"] .nav-link.active,
body[data-brand="husqvarna"] .nav-link:hover {
    color: #FFEF00;
    border-bottom-color: #FFEF00;
}

body[data-brand="honda"] .nav-link.active,
body[data-brand="honda"] .nav-link:hover {
    color: #CC0000;
    border-bottom-color: #CC0000;
}

body[data-brand="akt"] .nav-link.active,
body[data-brand="akt"] .nav-link:hover {
    color: #ED1C24;
    border-bottom-color: #ED1C24;
}

/* Títulos principales */
body[data-brand="ktm"] .hero-title,
body[data-brand="ktm"] h1 {
    background: linear-gradient(135deg, #F2771A 0%, #F46400 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-brand="husqvarna"] .hero-title,
body[data-brand="husqvarna"] h1 {
    color: rgb(39, 58, 96);
    background: none;
    -webkit-text-fill-color: rgb(39, 58, 96);
}

body[data-brand="husqvarna"] h2,
body[data-brand="husqvarna"] h3,
body[data-brand="husqvarna"] .motorcycle-title,
body[data-brand="husqvarna"] .section-title,
body[data-brand="husqvarna"] .section-title-minimal {
    color: rgb(39, 58, 96);
}

body[data-brand="honda"] .hero-title,
body[data-brand="honda"] h1 {
    background: linear-gradient(135deg, #CC0000 0%, #990000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-brand="akt"] .hero-title,
body[data-brand="akt"] h1 {
    color: rgb(0, 63, 109);
    background: none;
    -webkit-text-fill-color: rgb(0, 63, 109);
}

body[data-brand="akt"] h2,
body[data-brand="akt"] h3,
body[data-brand="akt"] .motorcycle-title,
body[data-brand="akt"] .section-title,
body[data-brand="akt"] .section-title-minimal {
    color: rgb(0, 63, 109);
}

/* Tabs activos */
body[data-brand="ktm"] .brand-tab.active {
    border-bottom-color: #F2771A;
}

body[data-brand="husqvarna"] .brand-tab.active {
    border-bottom-color: #FFEF00;
}

body[data-brand="honda"] .brand-tab.active {
    border-bottom-color: #CC0000;
}

body[data-brand="akt"] .brand-tab.active {
    border-bottom-color: #ED1C24;
}

/* Categorías activas */
body[data-brand="ktm"] .category-btn.active {
    background: #F2771A;
    border-color: #F2771A;
}

body[data-brand="husqvarna"] .category-btn.active {
    background: #FFEF00;
    border-color: #FFEF00;
    color: #005AAB;
}

body[data-brand="honda"] .category-btn.active {
    background: #CC0000;
    border-color: #CC0000;
}

body[data-brand="akt"] .category-btn.active {
    background: #ED1C24;
    border-color: #ED1C24;
}

/* Precio de motos */
body[data-brand="ktm"] .motorcycle-price {
    background: linear-gradient(135deg, #F2771A 0%, #F46400 100%);
}

body[data-brand="husqvarna"] .motorcycle-price {
    background: rgb(39, 58, 96);
    color: #FFFFFF;
}

body[data-brand="honda"] .motorcycle-price {
    background: linear-gradient(135deg, #CC0000 0%, #990000 100%);
}

body[data-brand="akt"] .motorcycle-price {
    background: rgb(0, 63, 109);
    color: #FFFFFF;
}

/* Badges de especificaciones */
body[data-brand="ktm"] .spec-badge-icon {
    border-color: #F2771A;
    color: #F2771A;
}

body[data-brand="husqvarna"] .spec-badge-icon {
    border-color: rgb(39, 58, 96);
    color: rgb(39, 58, 96);
}

body[data-brand="honda"] .spec-badge-icon {
    border-color: #CC0000;
    color: #CC0000;
}

body[data-brand="akt"] .spec-badge-icon {
    border-color: rgb(0, 63, 109);
    color: rgb(0, 63, 109);
}

/* Enlaces del footer */
body[data-brand="ktm"] .footer a:hover {
    color: #F2771A;
}

body[data-brand="husqvarna"] .footer a:hover {
    color: #FFEF00;
}

body[data-brand="honda"] .footer a:hover {
    color: #CC0000;
}

body[data-brand="akt"] .footer a:hover {
    color: #ED1C24;
}

/* Iconos sociales del footer */
body[data-brand="ktm"] .social-link:hover {
    background: #F2771A;
    border-color: #F2771A;
}

body[data-brand="husqvarna"] .social-link:hover {
    background: #FFEF00;
    border-color: #FFEF00;
    color: #005AAB;
}

body[data-brand="honda"] .social-link:hover {
    background: #CC0000;
    border-color: #CC0000;
}

body[data-brand="akt"] .social-link:hover {
    background: #ED1C24;
    border-color: #ED1C24;
}

/* Hero section personalizado */
body[data-brand="ktm"] .hero-section {
    background: linear-gradient(135deg, rgba(242, 119, 26, 0.1) 0%, rgba(242, 119, 26, 0.05) 50%, transparent 100%);
}

body[data-brand="husqvarna"] .hero-section {
    background: linear-gradient(135deg, rgba(39, 58, 96, 0.1) 0%, rgba(39, 58, 96, 0.05) 50%, transparent 100%);
}

body[data-brand="honda"] .hero-section {
    background: linear-gradient(135deg, rgba(204, 0, 0, 0.1) 0%, rgba(204, 0, 0, 0.05) 50%, transparent 100%);
}

body[data-brand="akt"] .hero-section {
    background: linear-gradient(135deg, rgba(0, 63, 109, 0.1) 0%, rgba(0, 63, 109, 0.05) 50%, transparent 100%);
}

/* CTA Section personalizado */
body[data-brand="ktm"] .cta-section {
    background: linear-gradient(135deg, #F2771A 0%, #F46400 100%);
}

body[data-brand="husqvarna"] .cta-section {
    background: linear-gradient(135deg, rgb(39, 58, 96) 0%, rgb(29, 48, 86) 100%);
}

body[data-brand="husqvarna"] .cta-section h2,
body[data-brand="husqvarna"] .cta-section p {
    color: #FFFFFF;
}

body[data-brand="honda"] .cta-section {
    background: linear-gradient(135deg, #CC0000 0%, #990000 100%);
}

body[data-brand="akt"] .cta-section {
    background: linear-gradient(135deg, rgb(0, 63, 109) 0%, rgb(0, 53, 99) 100%);
}

/* Elementos que deben transicionar con el cambio de tema */
.btn-primary,
.btn-outline-dark,
.feature-card,
.plan-card,
.nav-link.active,
.brand-link.active,
.hero-title,
.section-title-minimal,
.motorcycle-showcase,
.brand-tabs .brand-tab.active,
.navbar,
.footer,
.hero-section,
.cta-section {
    transition: 
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   APLICACIÓN DE COLORES DE MARCA
   ============================================ */

/* Botones primarios con color de marca */
.btn-primary {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-brand-lg);
}

/* Enlaces activos con color de marca */
.nav-link.active {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

.brand-link.active {
    color: var(--color-primary);
}

/* Títulos con gradiente de marca */
.hero-title {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tarjetas con acento de marca */
.feature-card::after {
    background: var(--gradient-primary);
}

.plan-title::after {
    background: var(--color-primary);
}

/* Badges y etiquetas */
.plan-badge {
    background: var(--gradient-primary);
}

.hero-label {
    border-color: rgba(var(--color-primary-rgb), 0.2);
    background: rgba(var(--color-primary-rgb), 0.05);
}

/* Logo icon con color de marca */
.logo-icon {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-brand);
}

/* Tabs de marca activos */
.brand-tabs .brand-tab.active {
    background: var(--color-primary);
    color: white;
}

.brand-tabs .brand-tab:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

/* Botones de moto */
.btn-moto-primary {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.btn-moto-primary:hover {
    background: var(--color-primary-light);
    box-shadow: var(--shadow-brand-lg);
}

.btn-moto-outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-moto-outline:hover {
    background: var(--color-primary);
    color: white;
}

/* Precio con color de marca */
.price-value {
    color: var(--color-primary);
}

/* Specs badges con color de marca */
.spec-badge-icon {
    color: var(--color-primary);
}

/* ============================================
   EFECTOS DE HOVER CON COLOR DE MARCA
   ============================================ */
.feature-card:hover {
    border-color: var(--color-primary);
}

.plan-card:hover {
    border-color: var(--color-primary);
}

/* ============================================
   HERO SECTION CON FONDO DE MARCA
   ============================================ */
.hero {
    background: linear-gradient(180deg, 
        rgba(var(--color-primary-rgb), 0.03) 0%, 
        #ffffff 100%);
}

/* ============================================
   ANIMACIÓN DE CAMBIO DE TEMA
   ============================================ */
@keyframes themeChange {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.95;
    }
    100% {
        opacity: 1;
    }
}

body[data-brand-changing="true"] {
    animation: themeChange 0.4s ease-in-out;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Asegurar que las transiciones sean suaves en móvil */
    body,
    .btn-primary,
    .nav-link.active,
    .brand-link.active {
        transition-duration: 0.3s;
    }
}

/* ============================================
   ACCESIBILIDAD - MODO ALTO CONTRASTE
   ============================================ */
@media (prefers-contrast: high) {
    body[data-brand="ktm"] {
        --color-primary: #FF7700;
        --color-secondary: #000000;
    }
    
    body[data-brand="husqvarna"] {
        --color-primary: #FFC107;
        --color-secondary: #000000;
    }
    
    body[data-brand="honda"] {
        --color-primary: #DD0000;
        --color-secondary: #B0B0B0;
    }
    
    body[data-brand="akt"] {
        --color-primary: #F00720;
        --color-secondary: #0055AA;
    }
}

/* ============================================
   MODO REDUCCIÓN DE MOVIMIENTO
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    body,
    .btn-primary,
    .feature-card,
    .plan-card,
    .nav-link.active,
    .brand-link.active {
        transition-duration: 0.01ms !important;
    }
}