.letracolor{
    color: #8a2be2 !important;
}
.btn-outline-videowall {
    --bs-btn-color: #8a2be2;
    --bs-btn-border-color: #8a2be2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8a2be2;
    --bs-btn-hover-border-color: #8a2be2;
    --bs-btn-focus-shadow-rgb: #8a2be2;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8a2be2;
    --bs-btn-active-border-color: #8a2be2;
}
.videowall-section { 
    position: relative; 
    min-height: 100vh; 
    display: flex; 
    align-items: center;
    padding: 80px 0; 
}

.videowall-bg { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover; 
    z-index: 0; 
}

.container { position: relative; z-index: 1; }

/* Texto */
.badge-producto { color: #8a2be2; font-weight: 700; letter-spacing: 2px; font-size: 14px; display: block; margin-bottom: 10px; }
.videowall-title { font-size: 48px; font-weight: 800; color: white; margin-bottom: 20px; }
.videowall-title span { color: #8a2be2; }
.videowall-lead { font-size: 22px; font-weight: 600; color: #8a2be2; margin-bottom: 20px; }
.videowall-description { color: #ddd; font-size: 16px; line-height: 24px; max-width: 500px; }

/* Caja de especificaciones */
.specs-panel {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid #333;
    padding: 30px;
    border-radius: 12px;
}

.spec-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #333;
}
.spec-row:last-child { border: none; }
.spec-row i { font-size: 24px; color: #8a2be2; width: 30px; text-align: center; }
.spec-row small { display: block; font-weight: 300; color: #8a2be2; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.spec-row h4 { margin: 0; font-size: 18px; color: #fff; }

/* Botones */
.btn-lg { padding: 12px 25px; font-size: 15px; }
.btn-danger { background-color: #8a2be2; border: none; }
.btn-outline-light:hover { background-color: #fff; color: #000; }

/* Sección 02 Aplicaciones */
.videowall-applications-section {
    background-color: #0a0a0a;
    padding: 10px 10px;
    color: #ffffff;
}

.videowall-applications-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    text-align: center;
    border: 1px solid #222;
    padding: 40px 20px;
    border-radius: 12px;
}

.videowall-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.videowall-app-item i {
    font-size: 40px;
    color: #8a2be2;
}

.videowall-app-item p {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    margin: 0;
    color: #ccc;
}

/* Responsividad */
@media (max-width: 992px) {
    .videowall-applications-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .videowall-applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/*******************/
/* Forzar cuadrícula de 8 columnas exactas */
.videowall-app8-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    text-align: center;
    border: 1px solid #222;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
}

.videowall-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.videowall-app-item i {
    font-size: 30px; 
    color: #8a2be2;
}

.videowall-app-item p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: #ccc;
}

/* Responsividad */
@media (max-width: 1200px) {
    .videowall-app8-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .videowall-app8-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/*******************/

/************* seccion 03 *************/
.videowall-how-it-works { background: #0a0a0a; padding: 10px 0; color: #ffffff; }

.section-title { color: #ffffff; font-size: 28px; margin-bottom: 20px; border-left: 4px solid #8a2be2; padding-left: 15px; font-weight: bold; }
.section-title-blu { color: #8a2be2; font-size: 28px; margin-bottom: 20px; border-left: 4px solid #8a2be2; padding-left: 15px; font-weight: bold; }

.section-desc { font-size: 15px; color: #cccccc; margin-bottom: 40px; line-height: 24px; }

/* Flujo de proceso compacto */
.process-flow { 
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start;
    gap: 10px; 
}

.step { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    width: 60px;
}

/* El círculo */
.step i, .step-icon-svg { 
    width: 50px; 
    height: 50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    border: 1px solid #8a2be2; 
    background: #111; 
    margin-bottom: 10px; 
    color: #8a2be2;
    font-size: 20px;
}

/* El SVG interno */
.step-icon-svg svg { width: 22px; height: 22px; fill: #8a2be2; }

.step span { font-size: 11px; line-height: 14px; color: #ffffff; }

.sequence-arrow { 
    display: flex; 
    align-items: center; 
    margin-top: 15px; 
    color: #8a2be2; 
}

/* Panel de capacidades */
.capabilities-panel { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr);
    gap: 15px; 
    background: #111; 
    padding: 20px; 
    border-radius: 12px; 
}
.cap-main-img { grid-column: span 5; margin-bottom: 15px; }
.cap-main-img img { width: 100%; border-radius: 8px; }

.cap-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cap-item i { font-size: 32px; color: #8a2be2; margin-bottom: 8px; }
.cap-item span { font-size: 12px; line-height: 12px; }

@media (max-width: 992px) {
    .process-flow { flex-wrap: wrap; justify-content: center; }
    .capabilities-panel { grid-template-columns: repeat(3, 1fr); }
    .cap-main-img { grid-column: span 3; }
}

/**********************/
.drone-lineup { background: #0a0a0a; color: #ffffff; padding: 80px 0; }

.section-title { color: #ffffff; margin-bottom: 50px; font-weight: bold; border-left: 4px solid #8a2be2; padding-left: 15px; }

.drone-card { 
    background: #111; 
    border: 1px solid #222; 
    padding: 25px; 
    border-radius: 12px; 
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    height: 100%;
}

.drone-card:hover { border-color: #8a2be2; transform: translateY(-10px); }

.drone-card h3 { font-size: 22px; margin-bottom: 5px; }
.model-id { color: #8a2be2; font-size: 13px; display: block; margin-bottom: 20px; font-weight: bold; }

.capacity-box { 
    background: #0a0a0a; 
    padding: 15px; 
    margin: 20px 0; 
    border: 1px solid #333; 
}
.txtblucolor { color: #8a2be2 !important; }
.capacity-box small { display: block; color: #888; font-size: 11px; margin-bottom: 5px; }

.capacity-box .liters { font-size: 28px; font-weight: bold; color: white; }

.specs { 
    list-style: none; 
    padding: 0; 
    text-align: left; 
    font-size: 14px; 
    color: #cccccc; 
    margin-bottom: 30px; 
}
.specs li { margin-bottom: 10px; display: flex; align-items: center; }

.btn-tech { 
    display: block; 
    background: #8a2be2; 
    color: white; 
    padding: 12px; 
    text-decoration: none; 
    border-radius: 6px; 
    font-weight: bold; 
    text-transform: uppercase;
    font-size: 14px;
}
.btn-tech:hover { background: #5d1aab; color: white; }

/* Ajustes Responsive */
@media (max-width: 768px) {
    .drone-lineup { padding: 40px 0; }
    .drone-card { margin-bottom: 20px; }
}

/*************** 05 mini items**********************/
.videowall-applications-section {
    background-color: #0a0a0a;
    padding: 10px 10px;
    color: #ffffff;
}

.videowall-section-title {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 10px;
    border-left: 4px solid #8a2be2;
    padding-left: 15px;
    font-weight: bold;
}

.videowall-section-title-blu {
    color: #ffffff;
    font-size: 28px;
    margin-bottom: 10px;
    border-left: 4px solid #8a2be2;
    padding-left: 15px;
    font-weight: bold;
}

.videowall-applications-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    align-items: start;
}

.videowall-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.videowall-app-item i {
    font-size: 28px;
    color: #8a2be2;
    margin-bottom: 10px;
}

.videowall-app-item p {
    font-size: 12px;
    line-height: 1.2;
    color: #cccccc;
    margin: 10px 0 0 0;
    max-width: 120px;
    font-weight: 300;
    letter-spacing: 0.2px;
}

@media (max-width: 1024px) {
    .videowall-applications-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 20px;
    }
}

@media (max-width: 600px) {
    .videowall-applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*************** SECCIÓN FINAL - SOLICITAR COTIZACIÓN *********************/
.videowall-solicitamos-section {
    background-color: #0a0a0a;
    padding: 10px 0;
}

.videowall-solicitamos-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 10px 10px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.videowall-solicitamos-icon {
    font-size: 40px;
    color: #8a2be2;
}

.videowall-solicitamos-text {
    flex-grow: 1;
}

.videowall-solicitamos-text h3 {
    font-size: 20px;
    margin: 0 0 5px 0;
    color: #ffffff;
}

.videowall-solicitamos-text p {
    font-size: 14px;
    margin: 0;
    color: #cccccc;
}

/* Botón CTA */
.btn-cta {
    background-color: #8a2be2;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.3s;
    text-decoration: none;
}

.btn-cta:hover {
    background-color: #5d1aab;
    color: #ffffff;
}

@media (max-width: 768px) {
    .videowall-solicitamos-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .videowall-solicitamos-icon { margin-bottom: 10px; }
}



/**********************************/
/* Adaptabilidad de la sección principal */
.feature-box { text-align: center; margin-bottom: 20px; }
.feature-box i { font-size: 30px; color: #8a2be2; display: block; margin-bottom: 8px; }
.feature-box p { font-size: 13px; font-weight: bold; color: #fff; line-height: 1.3; margin: 0; text-transform: uppercase; }

/* Contenedor IDEAL PARA */
.ideal-container { margin-top: 10px; padding-top: 10px; border-top: 1px solid #333; }
.ideal-title { font-size: 18px; color: #fff; margin-bottom: 25px; }
.ideal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.ideal-item { text-align: center; }
.ideal-item i { font-size: 24px; color: #fff; display: block; margin-bottom: 8px; }
.ideal-item span { font-size: 11px; color: #8a2be2; font-weight: 700; display: block; letter-spacing: 0.5px; }

/* Media Queries para máxima adaptabilidad */
@media (max-width: 992px) { /* Tablets */
    .ideal-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 576px) { /* Móviles */
    .videowall-title { font-size: 32px; }
    .ideal-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-box { margin-bottom: 30px; }
}

/************dev div***************/
/* Contenedor Encapsulado */
/* --- CSS DEFINITIVO DE LA SECCIÓN VIDEOWALL --- */

/* Estructura base */
.dv-section { 
    position: relative; 
    padding: 10px 0; 
    background: #000; 
    color: #fff; 
    min-height: 600px; 
    overflow: hidden; 
}

/* Imagen de fondo */
.dv-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0.9; 
    z-index: 0; 
}

.dv-container { position: relative; z-index: 1; }

/* Alineación bottom de las columnas */
.row-bottom-align { 
    display: flex; 
    align-items: flex-end; 
}

/* Tipografía */
.dv-title { font-size: 40px; font-weight: 600; line-height: 1.1; margin-bottom: 20px; }
.dv-title span { color: #8a2be2; display: block; }
.dv-desc { color: #ccc; font-size: 16px; margin-bottom: 40px; }

/* Iconos izquierda */
.dv-feat { display: flex; gap: 30px; margin-bottom: 40px; }
.dv-feat-icon { font-size: 40px; color: #8a2be2; margin-bottom: 10px; display: block; }
.dv-feat-text { font-size: 13px; font-weight: bold; text-transform: uppercase; line-height: 1.2; color: #fff; }
.dv-feat-item { text-align: center; /* ALINEACIÓN CENTRADA */ width: 130px; }

/* Botones */
.dv-btn-solicitar { background: #8a2be2; color: #fff; padding: 15px 30px; border-radius: 6px; font-weight: bold; text-transform: uppercase; text-decoration: none; display: inline-block; }
.dv-btn-especialista { background: transparent; color: #fff; padding: 14px 28px; border: 1px solid #555; border-radius: 6px; font-weight: bold; text-decoration: none; display: inline-block; }

/* Panel Ideal Para (Derecha) */
.dv-ideal-panel { background: rgba(0, 0, 0, 0.6); border: 1px solid #333; padding: 30px; border-radius: 12px; }
.dv-ideal-title { font-size: 16px; margin-bottom: 20px; color: #fff; font-weight: bold; }
.dv-ideal-grid { display: flex; justify-content: space-between; gap: 10px; }
.dv-ideal-item { text-align: center; }

/* Iconos Panel Derecha (Morados y grandes) */
.dv-ideal-item i { font-size: 32px; color: #8a2be2; display: block; margin-bottom: 8px; }

/* Textos Panel Derecha (Blancos) */
.dv-ideal-item span { font-size: 10px; color: #fff; font-weight: 700; display: block; line-height: 1.1; text-transform: uppercase; }

/* Responsive */
@media (max-width: 992px) {
    .row-bottom-align { flex-direction: column; align-items: stretch; }
    .dv-ideal-panel { margin-top: 30px; }
}


/*******Seccion 02**************/
.videowall-pro-section { 
    padding: 80px 0; 
    background: #0a0a0c; 
    color: #fff; 
    font-family: sans-serif; 
}

.videowall-pro-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* --- TÍTULO UNIFICADO --- */
.videowall-pro-title { 
    font-size: 28px; 
    color: #8a2be2; 
    margin-bottom: 30px; 
    font-weight: 700; 
    text-transform: uppercase; 
    line-height: 34px;
}

/* --- DESCRIPCIÓN --- */
.videowall-pro-description { 
    font-size: 16px; 
    line-height: 24px; 
    color: #ccc; 
    margin-bottom: 20px; 
}

/* --- GRID DE ICONOS (Izquierda) --- */
.videowall-pro-features-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    margin-top: 40px; 
}

.videowall-pro-feature-item { text-align: center; }

.videowall-pro-feature-item i { 
    font-size: 28px; 
    color: #8a2be2; 
    display: block; 
    margin-bottom: 10px; 
}

.videowall-pro-feature-item span { 
    font-size: 11px; 
    color: #fff; 
    display: block; 
    line-height: 14px; 
    text-transform: uppercase;
}

/* --- GRID DE APLICACIONES (Derecha) --- */
.videowall-pro-apps-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* Default móvil */
    gap: 15px; 
}

/* Ajuste escritorio: 4 tarjetas en una línea */
@media (min-width: 992px) {
    .videowall-pro-apps-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
}

.videowall-pro-app-card { 
    background: #1a1a1c; 
    border-radius: 8px; 
    overflow: hidden; 
    padding-bottom: 10px; 
}

.videowall-pro-app-card img { 
    width: 100%; 
    height: 100px; 
    object-fit: cover; 
    margin-bottom: 10px; 
}

.videowall-pro-app-card h5 { 
    font-size: 13px; 
    margin: 0 10px 5px 10px; 
    color: #fff; 
}

.videowall-pro-app-card p { 
    font-size: 11px; 
    color: #ccc; 
    margin: 0 10px; 
    line-height: 14px; 
}

/* --- RESPONSIVE Y ALINEACIÓN --- */
@media (max-width: 991px) {
    .videowall-pro-features-grid { 
        grid-template-columns: repeat(3, 1fr); 
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .videowall-pro-features-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .videowall-pro-apps-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}
/********************/




/*********************/
.dahua-integration-section { padding: 80px 0; background: #0a0a0c; color: #fff; }

/* Ajuste del diagrama para que sea fluido */
.dahua-diagram-container img { width: 100%; height: auto; border-radius: 8px; }

/* Grid de modelos: 3 columnas en escritorio, 2 en tablet, 1 en mobile */
.dahua-models-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
}

/* Ajuste de tarjetas para esta sección específica */
.dahua-models-grid .videowall-pro-app-card { padding: 15px; text-align: left; }
.dahua-models-grid .videowall-pro-app-card img { height: 140px; margin-bottom: 12px; }
.dahua-models-grid .videowall-pro-app-card h5 { font-size: 14px; margin: 0 0 8px 0; }
.dahua-models-grid .videowall-pro-app-card p { font-size: 12px; line-height: 1.4; color: #aaa; }

/* RESPONSIVE */
@media (max-width: 992px) {
    .dahua-models-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .dahua-models-grid { grid-template-columns: 1fr; }
}
/*********************/



/********************/
/* --- ESTILOS DE ENLACE "VER DETALLES" --- */
.view-details-link {
    display: inline-block;
    color: #8a2be2; /* Color violeta */
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10px;
    padding: 0 10px;
    transition: all 0.3s ease;
}

.view-details-link:hover {
    color: #fff; /* Se vuelve blanco al pasar el mouse */
    padding-left: 15px; /* Pequeño efecto de movimiento */
}

/* --- ESTILO PARA EL BOTÓN "VER TODOS LOS MODELOS" --- */
.btn-outline-light {
    border-color: #8a2be2 !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #8a2be2 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5); /* Efecto de brillo */
}

/* --- AJUSTE DE TARJETAS --- */
.dahua-models-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
}

.videowall-pro-app-card { 
    background: #1a1a1c; 
    border-radius: 8px; 
    overflow: hidden; 
    padding-bottom: 20px; /* Espacio extra abajo para el link */
}
/********************/





/**************/
/* --- ESTILOS PARA LA SECCIÓN TÉCNICA (videowall-04_3.jpg) --- */
/**************/
/* --- ESTILOS PARA LA SECCIÓN TÉCNICA (videowall-04_3.jpg) --- */
.videowall-info-section { padding: 60px 0; background-color: #0a0a0c; color: #fff; }

.dahua-info-card {
    background-color: #1a1a1c;
    padding: 30px;
    border-radius: 12px;
    height: 100%;
    border: 1px solid #2a2a2c;
    text-align: left;
}

.info-title { color: #8a2be2; font-size: 16px; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; }

/* Tabla */
.spec-list { padding: 0; }
.spec-item { display: flex; left-content: space-between; border-bottom: 1px solid #2a2a2c; padding: 12px 0; font-size: 13px; color: #ccc; }
.spec-item strong { color: #fff; font-weight: 500; padding-left: 10px; text-align: left; }

/* Listas */
.dahua-list { list-style: none; padding: 0; margin: 0; }
.dahua-list li { 
    margin-bottom: 10px; 
    font-size: 13px; 
    color: #ccc; 
    display: flex; 
    align-items: flex-start; 
}

.dahua-list li i { 
    color: #8a2be2; 
    /* Aumenta este valor para dar más espacio entre el icono y el texto */
    margin-right: 15px; 
    font-size: 18px; 
    flex-shrink: 0; 
}

/* Contenedor de texto para eliminar espacio extra */
.content-wrapper { display: flex; flex-direction: column; gap: 0px; }
.dahua-list li strong { color: #ffffff; display: block; line-height: 1.2; }
.dahua-list li span { color: #cccccc; font-size: 13px; }

/* Responsive */
@media (max-width: 991px) { .dahua-info-card { margin-bottom: 20px; } }
/**************/