/* <style> */

/* ==========================================
SECCIÓN COMPLETA - SIFACON FEATURES
========================================== */

.oksifacon-features {
    
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    padding: 40px 10px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;

    margin: 7rem !important;
    margin-left: 10rem;
    margin-right: 10rem;
    width: 80% ;

}

.oksifacon-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
}

/* ==========================================
CONTENEDOR
========================================== */

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

/* ==========================================
TÍTULO PRINCIPAL
========================================== */

.sf-main-title {
font-size: 2.25rem;
font-weight: 800;
text-align: center;
margin: 0 auto 16px;
max-width: 900px;
background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 50%, #818cf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.3;
letter-spacing: -0.02em;
}

/* ==========================================
SUBTÍTULO
========================================== */

.sf-subtitle {
text-align: center;
color: #edf1f7;
font-size: 1.1rem;
margin: 0 auto 60px;
max-width: 600px;
font-weight: 400;
}








/* ==========================================
GRID DE CARDS
========================================== */

.sf-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px;
margin-bottom: 50px;
}

/* ==========================================
CARD INDIVIDUAL
========================================== */

.sf-card {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(99, 102, 241, 0.25);
border-radius: 16px;
padding: 40px 32px;
backdrop-filter: blur(10px);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.sf-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
opacity: 0;
transition: opacity 0.35s ease;
border-radius: 16px 16px 0 0;
}

.sf-card:hover {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(99, 102, 241, 0.5);
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(99, 102, 241, 0.2),
    0 0 32px rgba(34, 211, 238, 0.1);
}

.sf-card:hover::before {
opacity: 1;
}

/* ==========================================
BADGE IA POWERED
========================================== */

.sf-ia-badge {
position: absolute;
top: 16px;
right: 16px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
animation: sf-pulse 2s infinite;
}

/* ==========================================
ICON BOX
========================================== */

.sf-icon-box {
width: 64px;
height: 64px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(34, 211, 238, 0.15) 100%);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: all 0.35s ease;
color: #22d3ee;
}

.sf-icon-box i {
width: 32px;
height: 32px;
stroke-width: 2;
}

.sf-card:hover .sf-icon-box {
transform: scale(1.08) rotate(3deg);
border-color: rgba(99, 102, 241, 0.6);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(34, 211, 238, 0.25) 100%);
}

/* ==========================================
LABEL (Problema)
========================================== */

.sf-card-label {
color: #94a3b8;
font-size: 0.95rem;
font-weight: 500;
margin: 0 0 16px;
line-height: 1.5;
}

/* ==========================================
BENEFIT (Solución con check)
========================================== */

.sf-benefit {
color: #f1f5f9;
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1.3;
}

.sf-benefit i {
width: 20px;
height: 20px;
color: #22d3ee;
flex-shrink: 0;
}

/* ==========================================
DESCRIPCIÓN
========================================== */

.sf-desc {
color: #cbd5e1;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
font-weight: 400;
}




































@media (max-width: 768px) {
    .oksifacon-features {
    padding: 60px 16px;
    }

    .sf-main-title { text-align: center; }

    .sf-subtitle {
        font-size: 1rem;
        margin-bottom: 40px;
        }
   




        

}
    
/* </style>
 */