/* ================================================
   GOWEBIX FEATURE BOX 2 PRO - ESTÁNDAR PREMIUM
   ================================================ */

.gowebix-featurebox-2.gowebix-fb2-pro {
    position: relative;
    margin-bottom: var(--fb2-margin-bottom, 30px);
    box-sizing: border-box;
    font-family: var(--gw-font, 'Inter'), -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Variables CSS dinámicas (definidas en inline style) */
    --fb2-icon-color: var(--gowebix-primary, #00C2E5);
    --fb2-icon-size: 36px;
    --fb2-title-color: var(--gowebix-gray-900, #1d2426);
    --fb2-title-size: 20px;
    --fb2-title-weight: 600;
    --fb2-text-color: var(--gowebix-gray-700, #5b676c);
    --fb2-text-size: 16px;
    --fb2-text-weight: 300;
    --fb2-line-height: 1.7;
    --fb2-line-opacity: 0.6;
    --fb2-line-width: 95%;
    
    /* Variables responsive */
    --fb2-title-size-mobile: calc(var(--fb2-title-size, 20px) * 0.9);
    --fb2-text-size-mobile: calc(var(--fb2-text-size, 16px) * 0.95);
    --fb2-icon-size-mobile: calc(var(--fb2-icon-size, 36px) * 0.85);
}

/* ================================================
   ESTRUCTURA BASE
   ================================================ */

/* Ícono SIN efecto hover */
.gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-icon {
    display: block;
    margin-bottom: 12px;
    line-height: 1;
    color: var(--fb2-icon-color) !important;
    font-size: var(--fb2-icon-size);
    
    /* Font Awesome */
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands";
    font-weight: 900;
    /* REMOVIDO: transition: color 0.3s ease, transform 0.3s ease; */
}

.gowebix-featurebox-2.gowebix-fb2-pro .fa-regular.gowebix-featurebox-2-icon {
    font-weight: 400;
}

.gowebix-featurebox-2.gowebix-fb2-pro .fa-brands.gowebix-featurebox-2-icon {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

/* Título */
.gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-title {
    margin-bottom: 8px;
    line-height: 1.3;
    font-weight: var(--fb2-title-weight);
    font-size: var(--fb2-title-size);
    color: var(--fb2-title-color) !important;
    transition: color 0.3s ease;
}

/* Texto */
.gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-text {
    line-height: var(--fb2-line-height);
    margin: 0;
    position: relative;
    font-weight: var(--fb2-text-weight);
    font-size: var(--fb2-text-size);
    color: var(--fb2-text-color) !important;
    transition: color 0.3s ease;
}

/* Línea decorativa */
.gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-text::after {
    content: '';
    display: block;
    margin: 25px auto 0 auto;
    width: var(--fb2-line-width, 95%);
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor, transparent);
    opacity: var(--fb2-line-opacity, 0.6);
    transition: opacity 0.3s ease, background 0.3s ease;
}

/* ================================================
   ALINEACIONES
   ================================================ */

.gowebix-fb2-align-left {
    text-align: left;
}

.gowebix-fb2-align-center {
    text-align: center;
}

.gowebix-fb2-align-right {
    text-align: right;
}

/* ================================================
   EFECTOS AVANZADOS PRO
   ================================================ */

/* Texto ultra fino */
.gowebix-fb2-ultra-thin .gowebix-featurebox-2-text {
    font-weight: 200 !important;
    letter-spacing: 0.01em !important;
    opacity: 0.95;
}

/* IMPORTANTE: Forzar modo claro debe respetar las variables CSS personalizadas */
.gowebix-fb2-force-light .gowebix-featurebox-2-title {
    color: var(--fb2-title-color, var(--gowebix-white, #ffffff)) !important;
    opacity: 0.98;
}

.gowebix-fb2-force-light .gowebix-featurebox-2-text {
    color: var(--fb2-text-color, rgba(255, 255, 255, 0.9)) !important;
    opacity: 0.9;
}

.gowebix-fb2-force-light .gowebix-featurebox-2-text::after {
    background: linear-gradient(to right, transparent, currentColor, transparent) !important;
    opacity: 0.3 !important;
}

/* Suavizado de fuentes */
.gowebix-fb2-smoothed {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.gowebix-fb2-smoothed .gowebix-featurebox-2-title,
.gowebix-fb2-smoothed .gowebix-featurebox-2-text {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ================================================
   DETECCIÓN AUTOMÁTICA DE FONDOS OSCUROS
   IMPORTANTE: Solo aplicar si NO hay force_light="yes" 
   y si los colores están usando variables por defecto
   ================================================ */

/* Detección de fondos oscuros - SOLO si no hay colores personalizados explícitos */
[class*="bg-dark"] .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-title-color:"]) .gowebix-featurebox-2-title,
[class*="dark-bg"] .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-title-color:"]) .gowebix-featurebox-2-title,
.bg-black .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-title-color:"]) .gowebix-featurebox-2-title,
section.dark .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-title-color:"]) .gowebix-featurebox-2-title,
.dark-section .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-title-color:"]) .gowebix-featurebox-2-title {
    color: var(--gowebix-white, #ffffff) !important;
}

[class*="bg-dark"] .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-text-color:"]) .gowebix-featurebox-2-text,
[class*="dark-bg"] .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-text-color:"]) .gowebix-featurebox-2-text,
.bg-black .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-text-color:"]) .gowebix-featurebox-2-text,
section.dark .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-text-color:"]) .gowebix-featurebox-2-text,
.dark-section .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light):not([style*="--fb2-text-color:"]) .gowebix-featurebox-2-text {
    color: rgba(255, 255, 255, 0.88) !important;
}

[class*="bg-dark"] .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light) .gowebix-featurebox-2-text::after,
[class*="dark-bg"] .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light) .gowebix-featurebox-2-text::after,
.bg-black .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light) .gowebix-featurebox-2-text::after,
section.dark .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light) .gowebix-featurebox-2-text::after,
.dark-section .gowebix-featurebox-2.gowebix-fb2-pro:not(.gowebix-fb2-force-light) .gowebix-featurebox-2-text::after {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    opacity: 0.25 !important;
}

/* ================================================
   CORRECCIÓN ESPECIAL: Si tiene color personalizado en variables,
   NO aplicar detección de fondo oscuro
   ================================================ */
.gowebix-featurebox-2.gowebix-fb2-pro[style*="--fb2-title-color:"] .gowebix-featurebox-2-title,
.gowebix-featurebox-2.gowebix-fb2-pro[style*="--fb2-text-color:"] .gowebix-featurebox-2-text {
    /* Estas reglas tienen prioridad sobre la detección de fondos oscuros */
}

/* ================================================
   RESPONSIVE PROGRESIVO
   ================================================ */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .gowebix-featurebox-2.gowebix-fb2-pro {
        --fb2-title-size: calc(var(--fb2-title-size) * 0.95);
        --fb2-text-size: calc(var(--fb2-text-size) * 0.98);
        --fb2-icon-size: calc(var(--fb2-icon-size) * 0.9);
    }
    
    .gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-text::after {
        margin-top: 20px;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    .gowebix-featurebox-2.gowebix-fb2-pro {
        --fb2-title-size: var(--fb2-title-size-mobile);
        --fb2-text-size: var(--fb2-text-size-mobile);
        --fb2-icon-size: var(--fb2-icon-size-mobile);
        --fb2-margin-bottom: calc(var(--fb2-margin-bottom, 30px) * 0.85);
    }
    
    .gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-text::after {
        margin-top: 15px;
        width: 90%;
    }
    
    .gowebix-fb2-align-left,
    .gowebix-fb2-align-center,
    .gowebix-fb2-align-right {
        text-align: center;
    }
}

/* Small Mobile (hasta 479px) */
@media (max-width: 479px) {
    .gowebix-featurebox-2.gowebix-fb2-pro {
        --fb2-title-size: calc(var(--fb2-title-size-mobile) * 0.95);
        --fb2-text-size: calc(var(--fb2-text-size-mobile) * 0.95);
        --fb2-icon-size: calc(var(--fb2-icon-size-mobile) * 0.9);
    }
    
    .gowebix-featurebox-2.gowebix-fb2-pro .gowebix-featurebox-2-text::after {
        margin-top: 12px;
        width: 85%;
    }
}

/* ================================================
   ELIMINADO COMPLETAMENTE: HOVER EFFECTS EN ICONOS
   ================================================ */

/* NOTA: Se ha removido completamente el hover effect en los íconos
   Los íconos ahora permanecen estáticos sin animación ni transformación */

/* Si quieres mantener algún hover sutil en la línea, puedes descomentar esto:
.gowebix-featurebox-2.gowebix-fb2-pro:hover .gowebix-featurebox-2-text::after {
    opacity: calc(var(--fb2-line-opacity, 0.6) + 0.1);
}
*/