/* ================================================
   GOWEBIX FEATURE BOX 1 PRO - VERSIÓN FUNCIONAL
   ================================================ */

/* ICONO WPBakery Backend */
.gowebix-shortcode-icon {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
  font-size: 22px;
  color: var(--gowebix-primary, #00C2E5);
}

/* ================================================
   FEATURE BOX BASE - VISIBLE Y FUNCIONAL
   ================================================ */
.gowebix-featurebox-1 {
    /* ESTILOS BASE VISIBLES */
    margin-bottom: 30px;
    box-sizing: border-box;
    position: relative;
    text-align: left;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Tipografía Gowebix */
    font-family: var(--gw-font, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Robito, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Variables CSS para control dinámico */
    --fb1-icon-color: var(--gowebix-primary, #00C2E5);
    --fb1-icon-size: 36px;
    --fb1-title-size: 20px;
    --fb1-text-size: 16px;
    --fb1-line-height: 1.7;
}

/* ================================================
   ÍCONO - VISIBLE
   ================================================ */
.gowebix-featurebox-1 .gowebix-featurebox-1-icon {
    display: inline-block !important;
    margin-bottom: 12px;
    line-height: 1;
    color: var(--fb1-icon-color);
    font-size: var(--fb1-icon-size);
    
    /* Font Awesome */
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Para íconos regulares */
.gowebix-featurebox-1 .fa-regular.gowebix-featurebox-1-icon {
    font-weight: 400 !important;
}

/* ================================================
   TÍTULO - VISIBLE
   ================================================ */
.gowebix-featurebox-1 .gowebix-featurebox-1-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    margin: 0 0 10px 0;
    font-family: inherit;
    font-weight: var(--fb1-title-weight, var(--gw-w-semibold, 600));
    font-size: var(--fb1-title-size);
    color: var(--fb1-title-color, var(--gowebix-gray-900, #1d2426));
    line-height: 1.25;
    letter-spacing: -0.3px;
}

/* ================================================
   TEXTO - VISIBLE
   ================================================ */
.gowebix-featurebox-1 .gowebix-featurebox-1-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    margin: 0;
    font-family: inherit;
    font-weight: var(--fb1-text-weight, var(--gw-w-regular, 400));
    font-size: var(--fb1-text-size);
    color: var(--fb1-text-color, var(--gowebix-gray-700, #5b676c));
    line-height: var(--fb1-line-height);
}

/* Párrafos dentro del texto */
.gowebix-featurebox-1 .gowebix-featurebox-1-text p {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 1.2em 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.gowebix-featurebox-1 .gowebix-featurebox-1-text p:last-child {
    margin-bottom: 0;
}

/* ================================================
   LÍNEA DIVISORIA
   ================================================ */
.gowebix-featurebox-1 .gowebix-featurebox-1-text::after {
    content: '';
    display: block;
    margin: 25px auto 0 auto;
    width: 80%;
    height: 1px;
    background: linear-gradient(to right, transparent, currentColor, transparent);
    opacity: 0.4;
}

/* ================================================
   ALINEACIONES
   ================================================ */
.gowebix-featurebox-1.gowebix-fb1-align-left {
    text-align: left;
}
.gowebix-featurebox-1.gowebix-fb1-align-left .gowebix-featurebox-1-text::after {
    margin-left: 0;
    margin-right: auto;
}

.gowebix-featurebox-1.gowebix-fb1-align-center {
    text-align: center;
}

.gowebix-featurebox-1.gowebix-fb1-align-right {
    text-align: right;
}
.gowebix-featurebox-1.gowebix-fb1-align-right .gowebix-featurebox-1-text::after {
    margin-left: auto;
    margin-right: 0;
}

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

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

/* Forzar modo claro */
.gowebix-featurebox-1.gowebix-fb1-force-light .gowebix-featurebox-1-title {
    color: var(--gowebix-white, #ffffff) !important;
    opacity: 0.98;
}

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

.gowebix-featurebox-1.gowebix-fb1-force-light .gowebix-featurebox-1-text::after {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    opacity: 0.25 !important;
}

/* ================================================
   DETECCIÓN AUTOMÁTICA DE FONDOS OSCUROS
   ================================================ */
[class*="bg-dark"] .gowebix-featurebox-1:not(.gowebix-fb1-force-light) .gowebix-featurebox-1-title,
[class*="dark-bg"] .gowebix-featurebox-1:not(.gowebix-fb1-force-light) .gowebix-featurebox-1-title,
.bg-black .gowebix-featurebox-1:not(.gowebix-fb1-force-light) .gowebix-featurebox-1-title {
    color: var(--gowebix-white, #ffffff) !important;
}

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

/* ================================================
   FONT AWESOME BRANDS (fa-brands) - ESPECÍFICO
   ================================================ */

/* Para íconos de marcas (fa-brands) */
.gowebix-featurebox-1 .fa-brands.gowebix-featurebox-1-icon,
.gowebix-featurebox-1 .fab.gowebix-featurebox-1-icon {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important; /* ¡IMPORTANTE! Brands usa 400, no 900 */
    font-style: normal;
}

/* Específico para Google */
.gowebix-featurebox-1 .fa-google.gowebix-featurebox-1-icon,
.gowebix-featurebox-1 .fa-brands.fa-google {
    /* Google icon específico */
    content: "\f1a0" !important; /* Código Unicode de Google */
}

/* ================================================
   FONT AWESOME SOLID (fa-solid) - CONFIRMAR
   ================================================ */
.gowebix-featurebox-1 .fa-solid.gowebix-featurebox-1-icon,
.gowebix-featurebox-1 .fas.gowebix-featurebox-1-icon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important; /* Solid usa 900 */
}

/* ================================================
   FONT AWESOME REGULAR (fa-regular)
   ================================================ */
.gowebix-featurebox-1 .fa-regular.gowebix-featurebox-1-icon,
.gowebix-featurebox-1 .far.gowebix-featurebox-1-icon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important; /* Regular usa 400 */
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .gowebix-featurebox-1 {
        margin-bottom: 20px;
    }
    
    .gowebix-featurebox-1 .gowebix-featurebox-1-text::after {
        width: 90%;
        margin-top: 20px;
    }
}