/* HIKVISION PARKING - Critical CSS v3.0.1 */

/* Variables por defecto (modo oscuro) */
:root {
    --hik-primary: #E31937;
    --hik-bg: #000000;
    --hik-bg-card: #111111;
    --hik-text: #FFFFFF;
    --hik-text-muted: rgba(255,255,255,0.6);
    --hik-border: rgba(255,255,255,0.1);
    --hik-navbar-bg: transparent;
    --hik-navbar-bg-scroll: rgba(0, 0, 0, 0.95);
    --hik-logo-width: 150px;
}

/* Modo claro */
[data-color-mode="light"] {
    --hik-bg: #FFFFFF;
    --hik-bg-card: #f5f5f5;
    --hik-text: #1a1a1a;
    --hik-text-muted: rgba(0,0,0,0.6);
    --hik-border: rgba(0,0,0,0.1);
    --hik-navbar-bg-scroll: rgba(255, 255, 255, 0.95);
}

/* Modo automatico */
@media (prefers-color-scheme: light) {
    [data-color-mode="auto"] {
        --hik-bg: #FFFFFF;
        --hik-bg-card: #f5f5f5;
        --hik-text: #1a1a1a;
        --hik-text-muted: rgba(0,0,0,0.6);
        --hik-border: rgba(0,0,0,0.1);
        --hik-navbar-bg-scroll: rgba(255, 255, 255, 0.95);
    }
}

.hikvision-parking-page,
.hikvision-contacto-page {
    background: var(--hik-bg);
    color: var(--hik-text);
}

/* ============================================
   HADA NAV — Sistema de navegación v1.0
   ============================================ */

/* --- Bar fija arriba --- */
.hada-bar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.5rem;
    background: transparent;
    transition: background 0.3s, box-shadow 0.3s;
}
.hada-bar.is-scrolled {
    background: var(--hik-navbar-bg-scroll);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 12px rgba(0,0,0,0.25);
}

/* Logo */
.hada-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 9010;
}
.hada-logo img {
    height: auto;
    width: auto;
    max-width: var(--hik-logo-width, 150px);
    max-height: 44px;
    object-fit: contain;
}

/* --- Desktop links (hidden on mobile) --- */
.hada-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hada-links a {
    color: var(--hik-text-muted);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s;
}
.hada-links a:hover {
    color: var(--hik-text);
}

/* --- Hamburger button --- */
.hada-burger {
    display: none;          /* hidden on desktop */
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 9020;
    position: relative;
}
.hada-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--hik-text);
    border-radius: 1px;
    position: absolute;
    left: 10px;
    transition: transform 0.3s, opacity 0.2s;
}
.hada-burger span:nth-child(1) { top: 14px; }
.hada-burger span:nth-child(2) { top: 21px; }
.hada-burger span:nth-child(3) { top: 28px; }

/* X animation */
.hada-burger.is-open span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}
.hada-burger.is-open span:nth-child(2) {
    opacity: 0;
}
.hada-burger.is-open span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

/* --- Drawer (mobile panel) --- */
.hada-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9005;
    pointer-events: none;
    visibility: hidden;
}
.hada-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* Overlay */
.hada-drawer-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
.hada-drawer.is-open .hada-drawer-bg {
    opacity: 1;
}

/* Panel — slide from RIGHT */
.hada-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 88vw;
    height: 100%;
    background: #111;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 5rem 0 2rem;
}
.hada-drawer.is-open .hada-drawer-panel {
    transform: translateX(0);
}

/* Drawer menu items */
.hada-drawer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}
.hada-drawer-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Stagger animation when drawer opens */
.hada-drawer.is-open .hada-drawer-menu li {
    opacity: 1;
    transform: translateX(0);
}
.hada-drawer.is-open .hada-drawer-menu li:nth-child(1) { transition-delay: 0.06s; }
.hada-drawer.is-open .hada-drawer-menu li:nth-child(2) { transition-delay: 0.10s; }
.hada-drawer.is-open .hada-drawer-menu li:nth-child(3) { transition-delay: 0.14s; }
.hada-drawer.is-open .hada-drawer-menu li:nth-child(4) { transition-delay: 0.18s; }
.hada-drawer.is-open .hada-drawer-menu li:nth-child(5) { transition-delay: 0.22s; }
.hada-drawer.is-open .hada-drawer-menu li:nth-child(6) { transition-delay: 0.26s; }

/* Links — right aligned */
.hada-drawer-menu a {
    display: block;
    padding: 1.1rem 1.5rem;
    text-align: right;
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s, padding-right 0.2s, background 0.2s;
}
.hada-drawer-menu a:hover,
.hada-drawer-menu a:active {
    color: var(--hik-primary);
    padding-right: 2rem;
    background: rgba(227,25,55,0.04);
}

/* CTA button in drawer */
.hada-drawer-menu a.hik-btn {
    display: block;
    margin: 1.5rem 1.25rem 0;
    padding: 0.875rem 1.25rem;
    text-align: center;
    border-bottom: none;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s, background 0.2s, color 0.2s;
}
.hada-drawer.is-open .hada-drawer-menu a.hik-btn {
    opacity: 1;
    transform: translateY(0);
}

/* --- MOBILE: show burger, hide links --- */
@media (max-width: 768px) {
    .hada-bar { padding: 0.75rem 1rem; }
    .hada-burger { display: block; }
    .hada-links { display: none; }
}

/* --- Body lock when drawer open --- */
body.hada-locked {
    overflow: hidden;
}

/* --- Light mode --- */
.hikvision-parking-page[data-color-mode="light"] .hada-bar {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.hikvision-parking-page[data-color-mode="light"] .hada-bar.is-scrolled {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
.hikvision-parking-page[data-color-mode="light"] .hada-burger span {
    background: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hada-links a {
    color: #6e6e73;
}
.hikvision-parking-page[data-color-mode="light"] .hada-links a:hover {
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hada-drawer-panel {
    background: #fff;
}
.hikvision-parking-page[data-color-mode="light"] .hada-drawer-menu a {
    color: #1d1d1f;
    border-bottom-color: #e5e5e7;
}
.hikvision-parking-page[data-color-mode="light"] .hada-drawer-menu a:hover {
    color: var(--hik-primary);
}

/* --- Auto mode --- */
@media (prefers-color-scheme: light) {
    .hikvision-parking-page[data-color-mode="auto"] .hada-bar {
        background: rgba(255,255,255,0.8);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-bar.is-scrolled {
        background: rgba(255,255,255,0.95);
        box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-burger span {
        background: #1d1d1f;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-links a {
        color: #6e6e73;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-links a:hover {
        color: #1d1d1f;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-drawer-panel {
        background: #fff;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-drawer-menu a {
        color: #1d1d1f;
        border-bottom-color: #e5e5e7;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hada-drawer-menu a:hover {
        color: var(--hik-primary);
    }
}

/* BUTTONS - Base Styles */
.hik-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.hik-btn-red {
    background: var(--hik-primary);
    color: #fff;
}

.hik-btn-red:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.hik-btn-white {
    background: #fff;
    color: #000;
}

.hik-btn-outline {
    background: transparent;
    border: 2px solid var(--hik-text);
    color: var(--hik-text);
}

.hik-btn-whatsapp {
    background: #25D366;
    color: #fff;
}

/* TEXTOS */
.hik-title-massive, .hik-title-large, .hik-title-medium, .hik-title-small,
.hik-hero-title, .hik-solution-title, .hik-product-name, .hik-process-title,
.hik-cta-title, .hik-stat-number, .hik-corporate-title {
    color: var(--hik-text);
}
.hik-text-large, .hik-text-medium, .hik-hero-description,
.hik-solution-description, .hik-process-description {
    color: var(--hik-text-muted);
}
.hik-text-gradient {
    background: linear-gradient(135deg, var(--hik-primary) 0%, #FF3D5A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* CARDS Y SECCIONES */
.hik-section-dark {
    background: var(--hik-bg-card);
}
.hik-service-card, .hik-solution-card, .hik-product-card,
.hik-contact-card, .hik-contact-form {
    background: var(--hik-bg-card);
    border-color: var(--hik-border);
}

/* CORPORATE SECTION */
.hik-corporate-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hik-corporate-image {
    position: relative;
    width: 100%;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.hik-corporate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 1;
}
.hik-corporate-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 4rem;
    margin-left: 5%;
}
.hik-corporate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(227, 25, 55, 0.15);
    border: 1px solid rgba(227, 25, 55, 0.3);
    border-radius: 50px;
    font-size: 0.8125rem;
    color: #E31937;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.hik-corporate-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1.5rem 0;
}
.hik-corporate-title .hik-text-gradient {
    display: block;
}
.hik-corporate-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .hik-corporate-image {
        min-height: 80vh;
        background-attachment: scroll;
    }
    .hik-corporate-content {
        padding: 2rem;
        margin-left: 0;
        text-align: center;
    }
    .hik-corporate-badge {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   STARLINK STYLE THEME - MERGED CONTENT
   ============================================ */

/* Extended CSS Variables */
:root {
    /* Colores Principales - Hikvision Brand */
    --hik-primary-dark: #B01030;
    --hik-primary-light: #FF3D5A;

    /* Colores de Fondo - Estilo Starlink */
    --bg-dark: #000000;
    --bg-section: #0a0a0a;
    --bg-card: #111111;
    --bg-card-hover: #1a1a1a;

    /* Colores de Texto */
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --text-muted: #555555;

    /* Colores de Acento */
    --accent-success: #00ff88;
    --accent-warning: #ffcc00;
    --accent-info: #00b4ff;

    /* Espaciado */
    --section-padding: 120px;
    --container-max: 1400px;

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.8s ease;

    /* Bordes */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 40px;
}

/* ============================================
   RESET Y BASE
   ============================================ */
.hikvision-parking-page,
.hikvision-parking-page * {
    box-sizing: border-box;
}

.hikvision-parking-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
.hik-title-massive {
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.hik-title-large {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.hik-title-medium {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.hik-title-small {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.hik-text-large {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 700px;
}

.hik-text-medium {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.hik-text-gradient {
    background: linear-gradient(135deg, var(--hik-primary) 0%, var(--hik-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   HERO SECTION - ESTILO STARLINK
   ============================================ */
.hik-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Subtle top gradient for depth (particles handle the interactive effect) */
.hik-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center top, rgba(227, 25, 55, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.hik-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
}

.hik-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(227, 25, 55, 0.1);
    border: 1px solid rgba(227, 25, 55, 0.3);
    border-radius: 50px;
    font-size: 0.875rem;
    color: var(--hik-primary);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hik-hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.hik-hero-title {
    margin-bottom: 1.5rem;
}

.hik-hero-description {
    margin: 0 auto 3rem;
}

/* ============================================
   BOTONES - ESTILO STARLINK
   ============================================ */
.hik-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.hik-btn-primary {
    background: var(--text-primary);
    color: var(--bg-dark);
}

.hik-btn-primary:hover {
    background: var(--text-secondary);
    transform: translateY(-2px);
}

.hik-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hik-btn-secondary:hover {
    border-color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.hik-btn-red {
    background: var(--hik-primary);
    color: var(--text-primary);
}

.hik-btn-red:hover {
    background: var(--hik-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(227, 25, 55, 0.3);
}

.hik-btn-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

.hik-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ============================================
   SECCIONES
   ============================================ */
.hik-section {
    padding: var(--section-padding) 2rem;
    position: relative;
}

.hik-section-dark {
    background: var(--bg-section);
}

.hik-container {
    max-width: var(--container-max);
    margin: 0 auto;
}

.hik-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.hik-section-header .hik-text-large {
    margin: 0 auto;
}

/* ============================================
   GRID DE SOLUCIONES
   ============================================ */
.hik-solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.hik-solution-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    padding: 2.5rem;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.hik-solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hik-primary), var(--hik-primary-light));
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.hik-solution-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(227, 25, 55, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hik-solution-card:hover::before {
    opacity: 1;
}

.hik-solution-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    transition: transform var(--transition-medium);
}

.hik-solution-card:hover .hik-solution-icon {
    transform: scale(1.1);
}

.hik-solution-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.hik-solution-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.hik-solution-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hik-solution-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    transition: color 0.3s ease;
}

.hik-solution-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--hik-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================
   PRODUCTOS DESTACADOS
   ============================================ */
.hik-products-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.hik-product-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: all var(--transition-medium);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hik-product-card:hover {
    border-color: rgba(227, 25, 55, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hik-product-image {
    position: relative;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-card) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hik-product-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform var(--transition-medium);
}

.hik-product-card:hover .hik-product-image img {
    transform: scale(1.05);
}

.hik-product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.375rem 0.75rem;
    background: var(--hik-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.hik-product-info {
    padding: 1.5rem;
}

.hik-product-category {
    font-size: 0.75rem;
    color: var(--hik-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.hik-product-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.hik-product-model {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.hik-product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hik-spec-tag {
    padding: 0.25rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================
   CARACTERÍSTICAS / ESTADÍSTICAS
   ============================================ */
.hik-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    text-align: center;
}

.hik-stat-item {
    padding: 2rem;
}

.hik-stat-number {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.hik-stat-number span {
    color: var(--hik-primary);
}

.hik-stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   PROCESO / TIMELINE
   ============================================ */
.hik-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    counter-reset: process;
}

.hik-process-step {
    position: relative;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    counter-increment: process;
}

.hik-process-step::before {
    content: counter(process);
    position: absolute;
    top: -1rem;
    left: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--hik-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

.hik-process-title {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.hik-process-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* ============================================
   BANNER CTA
   ============================================ */
.hik-cta-banner {
    background: linear-gradient(135deg, var(--hik-primary) 0%, var(--hik-primary-dark) 100%);
    border-radius: var(--border-radius-lg);
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hik-cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hik-cta-content {
    position: relative;
    z-index: 2;
}

.hik-cta-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.hik-cta-description {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   FOOTER
   ============================================ */
.hik-footer {
    padding: 4rem 2rem 2rem;
    background: var(--bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hik-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.hik-footer-brand {
    max-width: 300px;
}

.hik-footer-logo {
    height: 40px;
    margin-bottom: 1rem;
}

.hik-footer-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.hik-footer-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.hik-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hik-footer-links li {
    margin-bottom: 0.75rem;
}

.hik-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
}

.hik-footer-links a:hover {
    color: var(--text-primary);
}

.hik-footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.hik-footer-copyright {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.hik-footer-social {
    display: flex;
    gap: 1rem;
}

.hik-footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.hik-footer-social a:hover {
    background: var(--hik-primary);
    color: var(--text-primary);
}

/* ============================================
   ANIMACIONES SCROLL
   ============================================ */
.hik-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.hik-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hik-fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.hik-fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.hik-fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.hik-fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.hik-scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease;
}

.hik-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Delay classes */
.hik-delay-1 { transition-delay: 0.1s; }
.hik-delay-2 { transition-delay: 0.2s; }
.hik-delay-3 { transition-delay: 0.3s; }
.hik-delay-4 { transition-delay: 0.4s; }
.hik-delay-5 { transition-delay: 0.5s; }

/* Navbar extensions consolidated into main navbar block above */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .hik-solutions-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* ============================================
   MÓVIL — RESPONSIVE COMPONENTS (Non-navbar)
   ============================================ */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    /* Responsive de otros componentes */
    .hik-btn-group {
        flex-direction: column;
        width: 100%;
    }
    .hik-btn-group .hik-btn {
        width: 100%;
    }
    .hik-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .hik-cta-banner {
        padding: 3rem 1.5rem;
    }

    .hik-footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hik-footer-brand {
        max-width: none;
    }

    .hik-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hik-solutions-grid,
    .hik-products-showcase {
        grid-template-columns: 1fr;
    }

    .hik-stats-grid {
        grid-template-columns: 1fr;
    }

    .hik-solution-card,
    .hik-product-info {
        padding: 1.5rem;
    }
}

/* ============================================
   ELEMENTOR OVERRIDES
   ============================================ */
.elementor-section.hik-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
}

.elementor-widget-container .hik-title-massive,
.elementor-widget-container .hik-title-large,
.elementor-widget-container .hik-title-medium,
.elementor-widget-container .hik-title-small {
    margin: 0;
    padding: 0;
}

/* Fix Elementor spacing */
.elementor-element > .elementor-widget-container {
    transition: all var(--transition-medium);
}

/* ============================================
   EFECTOS ESPECIALES
   ============================================ */
/* Glow effect */
.hik-glow {
    box-shadow: 0 0 60px rgba(227, 25, 55, 0.3);
}

/* Glassmorphism */
.hik-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient border */
.hik-gradient-border {
    position: relative;
    background: var(--bg-card);
}

.hik-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(135deg, var(--hik-primary), transparent, var(--hik-primary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: inherit;
    pointer-events: none;
}

/* Particle mesh network background */
.hik-particles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hik-particles-bg canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Scroll indicator */
.hik-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hik-scroll-indicator::after {
    content: '';
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--text-muted), transparent);
    animation: scrollPulse 2s infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; height: 40px; }
    50% { opacity: 0.3; height: 60px; }
}

/* ============================================
   MODO CLARO (LIGHT MODE)
   ============================================ */
/* Variables para modo claro */
.hikvision-parking-page[data-color-mode="light"] {
    --bg-dark: #ffffff;
    --bg-section: #f5f5f7;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f2;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #86868b;
    --border-color: #d2d2d7;

    background-color: #ffffff;
    color: #1d1d1f;
}

/* Navbar light mode styles consolidated into main navbar block above */

/* Hero modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-hero {
    background-color: #ffffff;
}

.hikvision-parking-page[data-color-mode="light"] .hik-hero::before {
    background: radial-gradient(ellipse at center top, rgba(227, 25, 55, 0.04) 0%, transparent 60%);
}

/* Particle canvas colors adapt via JS per color mode */

.hikvision-parking-page[data-color-mode="light"] .hik-hero-title,
.hikvision-parking-page[data-color-mode="light"] .hik-title-massive,
.hikvision-parking-page[data-color-mode="light"] .hik-title-large,
.hikvision-parking-page[data-color-mode="light"] .hik-title-medium,
.hikvision-parking-page[data-color-mode="light"] .hik-title-small {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-hero-description,
.hikvision-parking-page[data-color-mode="light"] .hik-text-large,
.hikvision-parking-page[data-color-mode="light"] .hik-text-medium {
    color: #6e6e73;
}

/* Secciones modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-section {
    background-color: #ffffff;
}

.hikvision-parking-page[data-color-mode="light"] .hik-section-dark {
    background-color: #f5f5f7;
}

/* Cards modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-solution-card,
.hikvision-parking-page[data-color-mode="light"] .hik-product-card {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hikvision-parking-page[data-color-mode="light"] .hik-solution-card:hover,
.hikvision-parking-page[data-color-mode="light"] .hik-product-card:hover {
    background: #f5f5f7;
    border-color: rgba(227, 25, 55, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hikvision-parking-page[data-color-mode="light"] .hik-solution-title,
.hikvision-parking-page[data-color-mode="light"] .hik-product-name {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-solution-description,
.hikvision-parking-page[data-color-mode="light"] .hik-solution-features li {
    color: #6e6e73;
}

/* Hover text explícito para light mode solution cards */
.hikvision-parking-page[data-color-mode="light"] .hik-solution-card:hover .hik-solution-title {
    color: #1d1d1f;
}
.hikvision-parking-page[data-color-mode="light"] .hik-solution-card:hover .hik-solution-description,
.hikvision-parking-page[data-color-mode="light"] .hik-solution-card:hover .hik-solution-features li {
    color: #4a4a4f;
}

/* Product card border y sombra para light mode */
.hikvision-parking-page[data-color-mode="light"] .hik-product-card {
    border: 1px solid #d2d2d7;
}
.hikvision-parking-page[data-color-mode="light"] .hik-product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Process step modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-process-step {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.hikvision-parking-page[data-color-mode="light"] .hik-process-step:hover {
    background: #f9f9f9 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(227, 25, 55, 0.2) !important;
}

.hikvision-parking-page[data-color-mode="light"] .hik-process-title {
    color: #1d1d1f !important;
}

.hikvision-parking-page[data-color-mode="light"] .hik-process-description {
    color: #6e6e73 !important;
}

/* Botón secundario - modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-btn-secondary {
    background: transparent !important;
    color: #1d1d1f !important;
    border: 1px solid #d2d2d7 !important;
}

.hikvision-parking-page[data-color-mode="light"] .hik-btn-secondary:hover {
    border-color: #1d1d1f !important;
    background: rgba(0, 0, 0, 0.03) !important;
    color: #000000 !important;
}

/* Botón primario - modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-btn-primary {
    background: #1d1d1f;
    color: #ffffff;
}

.hikvision-parking-page[data-color-mode="light"] .hik-btn-primary:hover {
    background: #333333;
}

/* Botón outline - modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-btn-outline {
    color: #1d1d1f;
    border-color: #1d1d1f !important;
}

.hikvision-parking-page[data-color-mode="light"] .hik-btn-outline:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Stats modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-stat-number {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-stat-label {
    color: #6e6e73;
}

/* Spec tags modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-spec-tag {
    background: rgba(0, 0, 0, 0.05);
    color: #6e6e73;
}

/* Product info modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-product-image {
    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
}

.hikvision-parking-page[data-color-mode="light"] .hik-product-model {
    color: #86868b;
}

/* Footer modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-footer {
    background: #f5f5f7;
    border-top: 1px solid #d2d2d7;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-title {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-description,
.hikvision-parking-page[data-color-mode="light"] .hik-footer-links a {
    color: #6e6e73;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-links a:hover {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-bottom {
    border-top: 1px solid #d2d2d7;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-copyright {
    color: #86868b;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-social a {
    background: rgba(0, 0, 0, 0.05);
    color: #6e6e73;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-social a:hover {
    background: var(--hik-primary);
    color: #ffffff;
}

/* Glass effect modo claro */
.hikvision-parking-page[data-color-mode="light"] .hik-glass {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Light mode mobile menu consolidated into main navbar block above */

/* ============================================
   CORRECCIONES GENERALES DE BOTONES
   ============================================ */
/* Asegurar padding y estilos base del botón */
.hikvision-parking-page .hik-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1.75rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    line-height: 1.4 !important;
}

/* Botón rojo (CTA principal) */
.hikvision-parking-page .hik-btn-red {
    background: var(--hik-primary) !important;
    color: #ffffff !important;
}

.hikvision-parking-page .hik-btn-red:hover {
    background: var(--hik-primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(227, 25, 55, 0.3);
}

/* Botón blanco */
.hikvision-parking-page .hik-btn-white {
    background: #ffffff !important;
    color: #1d1d1f !important;
}

.hikvision-parking-page .hik-btn-white:hover {
    background: #f5f5f7 !important;
    transform: translateY(-2px);
}

/* Botón outline */
.hikvision-parking-page .hik-btn-outline {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 2px solid currentColor !important;
}

.hikvision-parking-page .hik-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Botón WhatsApp */
.hikvision-parking-page .hik-btn-whatsapp {
    background: #25D366 !important;
    color: #ffffff !important;
}

.hikvision-parking-page .hik-btn-whatsapp:hover {
    background: #128C7E !important;
    transform: translateY(-2px);
}

/* Navbar button compact size consolidated into main navbar block above */

/* ===========================================
   CORRECCIONES ADICIONALES LIGHT MODE
   =========================================== */

/* Scroll indicator light mode */
.hikvision-parking-page[data-color-mode="light"] .hik-scroll-indicator {
    color: #86868b;
}

.hikvision-parking-page[data-color-mode="light"] .hik-scroll-indicator::after {
    background: linear-gradient(to bottom, #86868b, transparent);
}

/* CTA Banner light mode */
.hikvision-parking-page[data-color-mode="light"] .hik-cta-banner {
    background: linear-gradient(135deg, #f5f5f7 0%, #fff5f6 100%);
}

.hikvision-parking-page[data-color-mode="light"] .hik-cta-banner h2,
.hikvision-parking-page[data-color-mode="light"] .hik-cta-banner .hik-title-large {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-cta-banner p {
    color: #6e6e73;
}

/* Feature list light mode */
.hikvision-parking-page[data-color-mode="light"] .hik-feature-item,
.hikvision-parking-page[data-color-mode="light"] .hik-feature-block {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

.hikvision-parking-page[data-color-mode="light"] .hik-feature-item:hover,
.hikvision-parking-page[data-color-mode="light"] .hik-feature-block:hover {
    border-color: rgba(227, 25, 55, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hikvision-parking-page[data-color-mode="light"] .hik-feature-title {
    color: #1d1d1f;
}

.hikvision-parking-page[data-color-mode="light"] .hik-feature-description {
    color: #6e6e73;
}

/* ===========================================
   CORRECCIONES DE CONTRASTE LIGHT MODE
   =========================================== */

/* Texto medium - muy importante para descripciones */
.hikvision-parking-page[data-color-mode="light"] .hik-text-medium {
    color: #6e6e73;
}

/* Texto muted - para textos secundarios */
.hikvision-parking-page[data-color-mode="light"] .hik-text-muted {
    color: #86868b;
}

/* Solution features list */
.hikvision-parking-page[data-color-mode="light"] .hik-solution-features li {
    color: #6e6e73;
}

/* Solution description */
.hikvision-parking-page[data-color-mode="light"] .hik-solution-description {
    color: #6e6e73;
}

/* Product model */
.hikvision-parking-page[data-color-mode="light"] .hik-product-model {
    color: #86868b;
}

/* Product specs */
.hikvision-parking-page[data-color-mode="light"] .hik-spec-tag {
    color: #6e6e73;
    background: rgba(0, 0, 0, 0.05);
}

/* Process step description */
.hikvision-parking-page[data-color-mode="light"] .hik-process-description {
    color: #6e6e73;
}

/* Footer links y descriptions */
.hikvision-parking-page[data-color-mode="light"] .hik-footer-description {
    color: #6e6e73;
}

.hikvision-parking-page[data-color-mode="light"] .hik-footer-links a {
    color: #6e6e73;
}

/* Stat label */
.hikvision-parking-page[data-color-mode="light"] .hik-stat-label {
    color: #6e6e73;
}

/* CTA Banner - mantiene fondo de color, ajustar texto */
.hikvision-parking-page[data-color-mode="light"] .hik-cta-description {
    color: #6e6e73;
}

/* Hero badge - siempre mantiene su estilo */
.hikvision-parking-page[data-color-mode="light"] .hik-hero-badge {
    color: var(--hik-primary);
}

/* Light mode navbar menu links consolidated into main navbar block above */

/* Product badge - fondo de color, texto blanco */
.hikvision-parking-page[data-color-mode="light"] .hik-product-badge {
    color: #ffffff;
}

/* Glass effect text */
.hikvision-parking-page[data-color-mode="light"] .hik-glass {
    color: #1d1d1f;
}

/* ============================================
   MODO AUTO - prefers-color-scheme: light
   Duplica TODOS los overrides de light mode
   para [data-color-mode="auto"] cuando el OS
   está en modo claro.
   ============================================ */
@media (prefers-color-scheme: light) {
    /* Variables para auto mode */
    .hikvision-parking-page[data-color-mode="auto"] {
        --bg-dark: #ffffff;
        --bg-section: #f5f5f7;
        --bg-card: #ffffff;
        --bg-card-hover: #f0f0f2;
        --text-primary: #1d1d1f;
        --text-secondary: #6e6e73;
        --text-muted: #86868b;
        --border-color: #d2d2d7;
        background-color: #ffffff;
        color: #1d1d1f;
    }

    /* Auto mode navbar consolidated into main navbar block above */

    /* Hero auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-hero {
        background-color: #ffffff;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-hero::before {
        background: radial-gradient(ellipse at center top, rgba(227, 25, 55, 0.04) 0%, transparent 60%);
    }

    /* Particle canvas colors adapt via JS per color mode */

    .hikvision-parking-page[data-color-mode="auto"] .hik-hero-title,
    .hikvision-parking-page[data-color-mode="auto"] .hik-title-massive,
    .hikvision-parking-page[data-color-mode="auto"] .hik-title-large,
    .hikvision-parking-page[data-color-mode="auto"] .hik-title-medium,
    .hikvision-parking-page[data-color-mode="auto"] .hik-title-small {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-hero-description,
    .hikvision-parking-page[data-color-mode="auto"] .hik-text-large,
    .hikvision-parking-page[data-color-mode="auto"] .hik-text-medium {
        color: #6e6e73;
    }

    /* Secciones auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-section {
        background-color: #ffffff;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-section-dark {
        background-color: #f5f5f7;
    }

    /* Cards auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-card,
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-card {
        background: #ffffff;
        border: 1px solid #d2d2d7;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-card:hover,
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-card:hover {
        background: #f5f5f7;
        border-color: rgba(227, 25, 55, 0.3);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-title,
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-name {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-description,
    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-features li {
        color: #6e6e73;
    }

    /* Hover text explícito para auto mode solution cards */
    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-card:hover .hik-solution-title {
        color: #1d1d1f;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-card:hover .hik-solution-description,
    .hikvision-parking-page[data-color-mode="auto"] .hik-solution-card:hover .hik-solution-features li {
        color: #4a4a4f;
    }

    /* Product card border y sombra para auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-card {
        border: 1px solid #d2d2d7;
    }
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    /* Process step auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-process-step {
        background: #ffffff !important;
        border: 1px solid #d2d2d7 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-process-step:hover {
        background: #f9f9f9 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(227, 25, 55, 0.2) !important;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-process-title {
        color: #1d1d1f !important;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-process-description {
        color: #6e6e73 !important;
    }

    /* Botón secundario auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-btn-secondary {
        background: transparent !important;
        color: #1d1d1f !important;
        border: 1px solid #d2d2d7 !important;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-btn-secondary:hover {
        border-color: #1d1d1f !important;
        background: rgba(0, 0, 0, 0.03) !important;
        color: #000000 !important;
    }

    /* Botón primario auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-btn-primary {
        background: #1d1d1f;
        color: #ffffff;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-btn-primary:hover {
        background: #333333;
    }

    /* Botón outline auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-btn-outline {
        color: #1d1d1f;
        border-color: #1d1d1f !important;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-btn-outline:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    /* Stats auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-stat-number {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-stat-label {
        color: #6e6e73;
    }

    /* Spec tags auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-spec-tag {
        background: rgba(0, 0, 0, 0.05);
        color: #6e6e73;
    }

    /* Product info auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-image {
        background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-product-model {
        color: #86868b;
    }

    /* Product badge auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-product-badge {
        color: #ffffff;
    }

    /* Footer auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-footer {
        background: #f5f5f7;
        border-top: 1px solid #d2d2d7;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-title {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-description,
    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-links a {
        color: #6e6e73;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-links a:hover {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-bottom {
        border-top: 1px solid #d2d2d7;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-copyright {
        color: #86868b;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-social a {
        background: rgba(0, 0, 0, 0.05);
        color: #6e6e73;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-footer-social a:hover {
        background: var(--hik-primary);
        color: #ffffff;
    }

    /* Glass effect auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-glass {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #1d1d1f;
    }

    /* Scroll indicator auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-scroll-indicator {
        color: #86868b;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-scroll-indicator::after {
        background: linear-gradient(to bottom, #86868b, transparent);
    }

    /* CTA Banner auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-cta-banner {
        background: linear-gradient(135deg, #f5f5f7 0%, #fff5f6 100%);
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-cta-banner h2,
    .hikvision-parking-page[data-color-mode="auto"] .hik-cta-banner .hik-title-large {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-cta-banner p {
        color: #6e6e73;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-cta-description {
        color: #6e6e73;
    }

    /* Feature list auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-feature-item,
    .hikvision-parking-page[data-color-mode="auto"] .hik-feature-block {
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.08);
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-feature-item:hover,
    .hikvision-parking-page[data-color-mode="auto"] .hik-feature-block:hover {
        border-color: rgba(227, 25, 55, 0.2);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-feature-title {
        color: #1d1d1f;
    }

    .hikvision-parking-page[data-color-mode="auto"] .hik-feature-description {
        color: #6e6e73;
    }

    /* Texto muted auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-text-muted {
        color: #86868b;
    }

    /* Hero badge auto mode */
    .hikvision-parking-page[data-color-mode="auto"] .hik-hero-badge {
        color: var(--hik-primary);
    }

    /* Auto mode mobile menu consolidated into main navbar block above */
}