/* ================================================
   Icono WPBakery Backend
   ================================================ */
.gowebix-shortcode-icon {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
  font-size: 22px;
  color: #00C2E5;
}

/* ================================================
   Gowebix Feature Box Style 4 Pro
   ================================================ */
.gowebix-featurebox-4-pro {
    display: block !important;
    text-align: left !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
    
    /* Variables CSS para control dinámico */
    --fb4-title-size: 22px;
    --fb4-title-color: #222222;
    --fb4-title-weight: 600;
    --fb4-title-padding-left: 24px;
    --fb4-title-margin-bottom: 12px;
    --fb4-text-size: 17px;
    --fb4-text-color: #6F6F6F;
    --fb4-text-weight: 300;
    --fb4-text-line-height: 1.7;
    --fb4-bullet-color: #00C2E5;
    --fb4-bullet-size: 10px;
    --fb4-bullet-radius: 2px;
}

/* Imagen */
.gowebix-featurebox-4-pro .gowebix-featurebox-4-image {
    width: 100% !important;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Título con bullet */
.gowebix-featurebox-4-pro .gowebix-featurebox-4-title {
    position: relative !important;
    padding-left: var(--fb4-title-padding-left) !important;
    margin-bottom: var(--fb4-title-margin-bottom) !important;
    font-weight: var(--fb4-title-weight) !important;
    color: var(--fb4-title-color) !important;
    font-size: var(--fb4-title-size) !important;
    line-height: 1.3 !important;
    
    /* Suavizado de fuentes si está activado */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--fb4-bullet-size) !important;
    height: var(--fb4-bullet-size) !important;
    background-color: var(--fb4-bullet-color) !important;
    border-radius: var(--fb4-bullet-radius) !important;
}

/* Texto principal */
.gowebix-featurebox-4-pro .gowebix-featurebox-4-text {
    font-size: var(--fb4-text-size) !important;
    color: var(--fb4-text-color) !important;
    font-weight: var(--fb4-text-weight) !important;
    line-height: var(--fb4-text-line-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    
    /* Suavizado de fuentes si está activado */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-text p {
    margin: 0 0 10px 0 !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-text p:last-child {
    margin-bottom: 0 !important;
}

/* Suavizado de fuentes activado */
.gowebix-featurebox-4-pro.gowebix-fb4-smoothed .gowebix-featurebox-4-title,
.gowebix-featurebox-4-pro.gowebix-fb4-smoothed .gowebix-featurebox-4-text,
.gowebix-featurebox-4-pro.gowebix-fb4-smoothed .gowebix-featurebox-4-text p {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Texto ultra fino */
.gowebix-featurebox-4-pro.gowebix-fb4-ultra-thin .gowebix-featurebox-4-text,
.gowebix-featurebox-4-pro.gowebix-fb4-ultra-thin .gowebix-featurebox-4-text p {
    font-weight: 200 !important;
    letter-spacing: 0.01em !important;
    opacity: 0.95;
}

/* ================================================
   DETECCIÓN AUTOMÁTICA DE FONDOS OSCUROS
   ================================================ */

/* Cuando está dentro de un contenedor con fondo oscuro */
[class*="bg-dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title,
[class*="dark-bg"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title,
.bg-black .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title,
section.dark .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title,
.dark-section .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title,
.vc_section[class*="dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title,
.wpb_column[class*="dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title {
    color: #ffffff !important;
    opacity: 0.98;
}

[class*="bg-dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text,
[class*="dark-bg"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text,
.bg-black .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text,
section.dark .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text,
.dark-section .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text,
.vc_section[class*="dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text,
.wpb_column[class*="dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-text {
    color: rgba(255,255,255,0.88) !important;
    opacity: 0.9;
}

/* Bullet en fondos oscuros - se aclara automáticamente */
[class*="bg-dark"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title::before,
[class*="dark-bg"] .gowebix-featurebox-4-pro:not(.gowebix-fb4-force-light) .gowebix-featurebox-4-title::before {
    background-color: rgba(255,255,255,0.8) !important;
}

/* Modo forzado claro (si el usuario lo selecciona) */
.gowebix-featurebox-4-pro.gowebix-fb4-force-light .gowebix-featurebox-4-title {
    color: #ffffff !important;
}

.gowebix-featurebox-4-pro.gowebix-fb4-force-light .gowebix-featurebox-4-text {
    color: rgba(255,255,255,0.9) !important;
}

.gowebix-featurebox-4-pro.gowebix-fb4-force-light .gowebix-featurebox-4-title::before {
    background-color: rgba(255,255,255,0.9) !important;
}

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

@media (max-width: 992px) {
    .gowebix-featurebox-4-pro {
        --fb4-title-size: calc(var(--fb4-title-size, 22px) * 0.95);
        --fb4-text-size: calc(var(--fb4-text-size, 17px) * 0.95);
    }
}

@media (max-width: 768px) {
    .gowebix-featurebox-4-pro {
        padding: 5px 0 !important;
        --fb4-title-size: calc(var(--fb4-title-size, 22px) * 0.9);
        --fb4-text-size: calc(var(--fb4-text-size, 17px) * 0.9);
        --fb4-title-padding-left: calc(var(--fb4-title-padding-left, 24px) * 0.8);
        --fb4-bullet-size: calc(var(--fb4-bullet-size, 10px) * 0.8);
    }
    
    .gowebix-featurebox-4-pro .gowebix-featurebox-4-title {
        margin-bottom: calc(var(--fb4-title-margin-bottom, 12px) * 0.8) !important;
    }
    
    .gowebix-featurebox-4-pro .gowebix-featurebox-4-text p {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    .gowebix-featurebox-4-pro {
        --fb4-title-size: calc(var(--fb4-title-size, 22px) * 0.85);
        --fb4-text-size: calc(var(--fb4-text-size, 17px) * 0.85);
        --fb4-text-line-height: calc(var(--fb4-text-line-height, 1.7) + 0.1);
    }
}

/* ========================================
   FEATURE BOX 4 PRO – FINAL POLISH CLEAN
   ======================================== */

.gowebix-featurebox-4-pro {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.gowebix-featurebox-4-pro:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,0.10) !important;
}

/* Imagen */
.gowebix-featurebox-4-pro .gowebix-featurebox-4-image {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Título */
.gowebix-featurebox-4-pro .gowebix-featurebox-4-title {
    position: relative !important;
    padding: 20px 24px 0 48px !important;
    margin: 0 0 12px 0 !important;
    font-weight: var(--fb4-title-weight) !important;
    color: var(--fb4-title-color) !important;
    font-size: var(--fb4-title-size) !important;
    line-height: 1.3 !important;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-title::before {
    content: '' !important;
    position: absolute !important;
    left: 24px !important;
    top: 30px !important;
    transform: none !important;
    width: var(--fb4-bullet-size) !important;
    height: var(--fb4-bullet-size) !important;
    background-color: var(--fb4-bullet-color) !important;
    border-radius: var(--fb4-bullet-radius) !important;
}

/* Texto */
.gowebix-featurebox-4-pro .gowebix-featurebox-4-text {
    flex: 1 1 auto !important;
    min-height: 190px !important;
    font-size: var(--fb4-text-size) !important;
    color: var(--fb4-text-color) !important;
    font-weight: var(--fb4-text-weight) !important;
    line-height: var(--fb4-text-line-height) !important;
    margin: 0 !important;
    padding: 0 24px 24px 24px !important;
    text-align: left !important;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-text p {
    margin: 0 0 10px 0 !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.gowebix-featurebox-4-pro .gowebix-featurebox-4-text p:last-child {
    margin-bottom: 0 !important;
}