/*======================================
BLOG HERO
======================================*/

.blog-hero{

    padding-top:170px;
    padding-bottom:90px;

    background:linear-gradient(135deg,#0b1220 0%,#13233d 60%,#1b4d7a 100%);

    color:#fff;

    overflow:hidden;

    position:relative;

}

.blog-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(255,255,255,.04);

    border-radius:50%;

    right:-180px;
    top:-120px;

}

.blog-title{

    font-size:3.2rem;

    font-weight:700;

    line-height:1.15;

    margin-bottom:25px;

}

.blog-subtitle{

    font-size:1.15rem;

    line-height:1.9;

    color:#d8d8d8;

}

.hero-blog-image{

    width:100%;

    max-width:100%;

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

    position:relative;

    z-index:1;

}

.blog-buttons{

    margin-top:35px;

}

.blog-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:45px;

}

.blog-tags span{

    background:rgba(255,255,255,.08);

    padding:10px 18px;

    border-radius:30px;

    font-size:14px;

    color:white;

}

/*======================================
ESTADISTICAS
======================================*/

.blog-stats{

    background:#fff;

    padding:70px 0;

}

.blog-stats h2{

    color:#0d6efd;

    font-size:48px;

    font-weight:700;

}

.blog-stats p{

    margin-top:10px;

    color:#555;

    font-size:16px;

}

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

@media(max-width:991px){

.blog-hero{

padding-top:140px;

text-align:center;

}

.blog-title{

font-size:2.3rem;

}

.blog-subtitle{

font-size:1rem;

}

.hero-blog-image{

margin-top:50px;

max-width:90%;

}

.blog-tags{

justify-content:center;

}

}

/*=====================================
 PANEL IA BLOG
=====================================*/


.ia-blog-panel{

position:relative;

padding:45px 30px;

z-index:3;

}


.ia-blog-panel .hero-blog-image{

border-radius:25px;

width:100%;

}



.blog-floating-card{

position:absolute;

background:white;

color:#111;

padding:15px 20px;

border-radius:15px;

display:flex;

align-items:center;

gap:12px;

box-shadow:0 15px 40px rgba(0,0,0,.25);

font-size:22px;

z-index:5;

}



.blog-floating-card strong{

display:block;

font-size:15px;

}


.blog-floating-card small{

display:block;

font-size:12px;

color:#666;

}

.card-one{

top:70px;

left:-35px;

}


.card-two{

bottom:120px;

right:-35px;

}


.card-three{

bottom:35px;

left:-20px;

}


@media(max-width:991px){

.blog-floating-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:15px auto;

width:90%;

justify-content:center;

}


.ia-blog-panel{

margin-top:50px;

padding:20px;

}

}

/*=====================================
 ARTICULOS DESTACADOS
=====================================*/


.blog-featured{

padding:90px 0;

background:#ffffff;

}



.blog-featured h2{

font-size:38px;

font-weight:700;

color:#111827;

}



.featured-main{

position:relative;

height:520px;

overflow:hidden;

border-radius:25px;

}



.featured-main img{

width:100%;

height:100%;

object-fit:cover;

}



.featured-overlay{

position:absolute;

bottom:0;

left:0;

right:0;

padding:45px 40px 35px;

color:white;

background:linear-gradient(
to top,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.75) 45%,
rgba(0,0,0,.15) 100%
);

z-index:3;

}



.featured-overlay span{

background:#0d6efd;

padding:8px 15px;

border-radius:20px;

font-size:13px;

}



.featured-overlay h3{

font-size:32px;

font-weight:700;

line-height:1.25;

color:#ffffff;

text-shadow:0 3px 10px rgba(0,0,0,.5);

margin-top:20px;

}



.featured-overlay p{

font-size:16px;

line-height:1.7;

}



.featured-overlay a{

color:white;

font-weight:600;

}



.featured-small{

display:flex;

align-items:center;

gap:18px;

background:white;

border-radius:20px;

padding:18px;

box-shadow:0 10px 35px rgba(0,0,0,.10);

min-height:150px;

}


.featured-small img{

width:160px;

height:130px;

object-fit:cover;

border-radius:15px;

}



.featured-small span{

font-size:13px;

color:#0d6efd;

font-weight:600;

}



.featured-small h4{

font-size:18px;

font-weight:700;

margin-top:10px;

}



.featured-small a{

font-size:14px;

color:#0d6efd;

font-weight:600;

}




@media(max-width:991px){


.featured-main{

height:450px;

}



.featured-overlay{

padding:25px;

}



.featured-overlay h3{

font-size:23px;

}



.featured-small{

margin-top:20px;

}



.featured-small img{

width:120px;

height:110px;

}


}

.featured-small h4{

color:#111827 !important;

font-weight:700;

}


.featured-small p{

color:#555;

}


.featured-small span{

color:#0066ff !important;

}


.featured-small a{

color:#0066ff !important;

}

/*======================================
NAVBAR BLOG / ARTÍCULOS
======================================*/

#mainNav{
    background: rgba(11,18,32,.96);
    backdrop-filter: blur(12px);
    transition: all .3s ease;
    padding: 12px 0;
}

#mainNav .navbar-brand{
    display:flex;
    align-items:center;
}

.logo-navbar{
    height:48px !important;
    width:auto !important;
    max-height:48px !important;
}

#mainNav .nav-link{
    color:#fff !important;
    font-weight:500;
    margin:0 10px;
    transition:.3s;
}

#mainNav .nav-link:hover{
    color:#3ea6ff !important;
}

#mainNav .nav-item.active .nav-link{
    color:#3ea6ff !important;
}

.btn-cta{
    background:#0d6efd;
    color:#fff !important;
    border-radius:40px;
    padding:12px 26px;
    font-weight:600;
}

.btn-cta:hover{
    background:#0056d8;
}

/*=====================================
 CONTENIDO ARTICULO BLOG
=====================================*/


.article-section{

background:#f8fafc;

padding:80px 0;

}



.article-card{

background:white;

border-radius:25px;

padding:55px;

box-shadow:0 15px 45px rgba(0,0,0,.08);

}



.article-card p{

font-size:17px;

line-height:1.9;

color:#374151;

margin-bottom:25px;

}



.article-tag{

display:inline-block;

background:#e8f1ff;

color:#0066ff;

font-weight:600;

padding:10px 18px;

border-radius:30px;

margin-bottom:25px;

font-size:14px;

}




.article-card h2{

margin-top:45px;

margin-bottom:20px;

font-size:32px;

font-weight:700;

color:#111827;

}




.article-index-box{

background:#0f172a;

color:white;

padding:30px;

border-radius:20px;

margin:40px 0;

}



.article-index-box h3{

color:white;

font-size:22px;

}



.article-index-box li{

margin-bottom:12px;

line-height:1.6;

}





.article-highlight{

background:linear-gradient(
135deg,
#0d6efd,
#12365a
);

color:white;

padding:35px;

border-radius:20px;

margin:40px 0;

box-shadow:0 15px 35px rgba(0,0,0,.2);

}



.article-highlight h3{

color:white;

font-size:24px;

}



.article-highlight p{

color:white;

}





.ai-table{

width:100%;

border-collapse:separate;

border-spacing:0;

overflow:hidden;

border-radius:15px;

margin:30px 0;

}



.ai-table th{

background:#0d6efd;

color:white;

padding:18px;

font-size:16px;

}



.ai-table td{

background:white;

color:#374151;

padding:18px;

border-bottom:1px solid #e5e7eb;

}



.ai-table tr:hover td{

background:#f1f5f9;

}





.benefit-list li{

margin-bottom:15px;

line-height:1.7;

color:#374151;

}




.article-cta{

background:#0f172a;

color:white;

padding:45px;

border-radius:25px;

margin-top:60px;

text-align:center;

}



.article-cta h2{

color:white;

}



.article-cta p{

color:#d1d5db;

}



@media(max-width:768px){


.article-card{

padding:25px;

}


.article-card h2{

font-size:25px;

}


}

/*=====================================
 LISTA DE PASOS ARTICULO
=====================================*/


.article-check-list{

list-style:none;

padding:0;

margin:30px 0;

}



.article-check-list li{

display:flex;

align-items:center;

gap:15px;

background:#f8fafc;

border-left:4px solid #0d6efd;

padding:15px 20px;

margin-bottom:15px;

border-radius:12px;

color:#1f2937;

font-size:17px;

line-height:1.6;

}



.article-check-list span{

display:flex;

align-items:center;

justify-content:center;

background:#0d6efd;

color:white;

width:28px;

height:28px;

border-radius:50%;

font-weight:bold;

font-size:16px;

}

/*=====================================
 IMAGEN HERO ARTICULO
=====================================*/


.article-image-box{

padding:20px;

}



.article-main-image{

width:100%;

height:520px;

object-fit:cover;

border-radius:30px;

box-shadow:0 25px 70px rgba(0,0,0,.35);

}



@media(max-width:991px){


.article-main-image{

height:auto;

margin-top:40px;

}


}