/* ======================================================
   IMPULSO CON PROPÓSITO
   ESTILOS PRINCIPALES
====================================================== */

/* ========= RESET ========= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--fuente);

    background:var(--color-fondo);

    color:var(--color-principal);

    line-height:1.7;

}

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

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/* ========= ENLACES ========= */

a{

    text-decoration:none;

    transition:var(--transicion);

}

/* ========= IMÁGENES ========= */

img{

    max-width:100%;

    display:block;

}

/* ========= HEADER ========= */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:#ffffffee;

    backdrop-filter:blur(12px);

    box-shadow:var(--sombra-suave);

}

/* ========= LOGO ========= */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.4rem;

    font-weight:700;

    color:var(--color-principal);

}

.logo img{

    width:55px;

}

/* ========= MENÚ ========= */

.nav-link{

    color:var(--color-principal)!important;

    font-weight:500;

    margin-left:15px;

}

.nav-link:hover{

    color:var(--color-finanzas)!important;

}

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

.hero{

    padding-top:170px;

    padding-bottom:100px;

}

.hero h1{

    font-size:3.5rem;

    font-weight:700;

    margin:20px 0;

    line-height:1.2;

}

.hero p{

    font-size:1.15rem;

    color:var(--color-secundario);

    margin-bottom:30px;

}

.hero-subtitle{

    color:var(--color-finanzas);

    font-weight:600;

}

/* ========= BOTONES ========= */

.btn{

    border-radius:50px;

    padding:12px 28px;

    font-weight:600;

    transition:var(--transicion);

}

.btn:hover{

    transform:translateY(-3px);

}

/* ========= IMPULSO ========= */

.impulso{

    padding:100px 0;

}

.titulo{

    text-align:center;

    margin-bottom:60px;

}

.titulo h2{

    font-size:2.6rem;

    margin-bottom:10px;

}

.titulo p{

    color:var(--color-secundario);

}

/* ========= TARJETAS ========= */

.card-finanzas,

.card-fe,

.card-reflexion{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:var(--sombra-suave);

    transition:var(--transicion);

    height:100%;

}

.card-finanzas:hover,

.card-fe:hover,

.card-reflexion:hover{

    transform:translateY(-10px);

    box-shadow:var(--sombra-media);

}

/* ========= ICONOS ========= */

.card-finanzas i{

    font-size:3rem;

    color:var(--color-finanzas);

    margin-bottom:20px;

}

.card-fe i{

    font-size:3rem;

    color:var(--color-fe);

    margin-bottom:20px;

}

.card-reflexion i{

    font-size:3rem;

    color:var(--color-reflexiones);

    margin-bottom:20px;

}

/* ========= TÍTULOS ========= */

.card-finanzas h3,

.card-fe h3,

.card-reflexion h3{

    margin-bottom:15px;

    font-size:1.5rem;

}

.card-finanzas p,

.card-fe p,

.card-reflexion p{

    margin-bottom:25px;

    color:var(--color-secundario);

}

/* ========= FOOTER ========= */

footer{

    background:var(--color-footer);

    color:white;

    padding:50px 0;

    text-align:center;

}
/*==================================================
ESTADÍSTICAS
==================================================*/

.estadisticas{

    background:linear-gradient(135deg,#2E7D32,#1565C0);

    color:#fff;

    padding:90px 0;

}

.estadisticas .titulo h2{

    color:#fff;

}

.estadisticas .titulo p{

    color:rgba(255,255,255,.85);

}

.contador{

    text-align:center;

    padding:35px 20px;

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

    border-radius:20px;

    backdrop-filter:blur(10px);

    transition:.4s;

}

.contador:hover{

    transform:translateY(-8px);

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

}

.contador h3{

    font-size:3rem;

    font-weight:700;

    color:#fff;

    margin-bottom:10px;

}

.contador p{

    color:#fff;

    font-size:1.1rem;

    margin:0;

}

/*==================================================
FINANZAS
==================================================*/

.finanzas{

    background:#f8fff8;

}

.finanzas .titulo h2{

    color:var(--color-finanzas);

}

.finanzas .card-finanzas{

    border-top:6px solid var(--color-finanzas);

}

.card-finanzas{

    overflow:hidden;

}

.card-finanzas h3{

    margin-top:15px;

    margin-bottom:15px;

}

.card-finanzas p{

    margin-bottom:25px;

}

.card-finanzas .btn{

    width:100%;

}

/*==================================================
ADSENSE
==================================================*/

.adsense{

    padding:50px 0;

    background:#f3f3f3;

}

.adsense-box{

    border:2px dashed #cfcfcf;

    background:#ffffff;

    padding:40px;

    text-align:center;

    border-radius:20px;

    color:#777;

    font-size:1.1rem;

}

/*==================================================
CTA
==================================================*/

.cta{

    background:linear-gradient(135deg,#1565C0,#2E7D32);

    color:#fff;

}

.cta h2{

    color:#fff;

    font-size:2.4rem;

    margin-bottom:20px;

}

.cta p{

    color:#fff;

    opacity:.9;

}

.cta .btn{

    padding:15px 35px;

    font-size:1.1rem;

}
/*==================================================
  SECCIÓN FE
==================================================*/

.fe{

    padding:100px 0;

    background:#ffffff;

}

.fe .titulo h2{

    color:var(--color-fe);

}

.fe .card-fe{

    border-top:6px solid var(--color-fe);

}

/*==================================================
  SECCIÓN REFLEXIONES
==================================================*/

.reflexiones{

    padding:100px 0;

    background:#f8f9fa;

}

.reflexiones .titulo h2{

    color:var(--color-reflexiones);

}

.reflexiones .card-reflexion{

    border-top:6px solid var(--color-reflexiones);

}

/*==================================================
  TARJETAS GENERALES
==================================================*/

.card-finanzas,
.card-fe,
.card-reflexion{

    position:relative;

    overflow:hidden;

    cursor:pointer;

}

.card-finanzas::before,
.card-fe::before,
.card-reflexion::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
    transparent,
    var(--color-dorado),
    transparent);

    transition:.6s;

}

.card-finanzas:hover::before,
.card-fe:hover::before,
.card-reflexion:hover::before{

    left:100%;

}

.card-finanzas:hover,
.card-fe:hover,
.card-reflexion:hover{

    transform:translateY(-12px);

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

}

/*==================================================
  BOTONES
==================================================*/

.btn-primary{

    background:var(--color-finanzas);

    border:none;

}

.btn-primary:hover{

    background:#0f5aa8;

}

.btn-success{

    background:var(--color-principal);

    border:none;

}

.btn-success:hover{

    background:#236326;

}

.btn-warning{

    background:var(--color-dorado);

    color:#fff;

    border:none;

}

.btn-warning:hover{

    background:#d68f00;

    color:#fff;

}

/*==================================================
  SOMBRAS
==================================================*/

.shadow-soft{

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.shadow-medium{

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.shadow-large{

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

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

.scale:hover{

    transform:scale(1.04);

}

.rotate:hover{

    transform:rotate(1deg);

}

.border-radius{

    border-radius:20px;

}

/*==================================================
  ESPACIADOS
==================================================*/

.py-100{

    padding:100px 0;

}

.py-80{

    padding:80px 0;

}

.mt-80{

    margin-top:80px;

}

.mb-80{

    margin-bottom:80px;

}

/*==================================================
  TRANSICIONES
==================================================*/

.transition{

    transition:.4s ease;

}

/*==================================================
  DIVISORES
==================================================*/

.divider{

    width:90px;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--color-finanzas),
        var(--color-principal)
    );

    border-radius:50px;

    margin:20px auto 35px;

}
/*==================================================
HEADER PREMIUM v2.0
==================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

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

    backdrop-filter:blur(15px);

    transition:.4s;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.header.scrolled{

    padding:2px 0;

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

}

.navbar{

    padding:14px 0;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.35rem;

    font-weight:700;

    color:var(--color-principal);

}

.logo img{

    width:55px;

    transition:.4s;

}

.logo:hover img{

    transform:rotate(-5deg) scale(1.08);

}

.nav-link{

    position:relative;

    font-weight:600;

    margin-left:18px;

    color:var(--color-principal)!important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:3px;

    background:var(--color-finanzas);

    transition:.35s;

    border-radius:50px;

}

.nav-link:hover::after{

    width:100%;

}

.nav-link:hover{

    color:var(--color-finanzas)!important;

}

.btn-success{

    border-radius:50px;

    padding:12px 26px;

    font-weight:600;

}

#modoOscuro{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.1rem;

}

.navbar-toggler{

    border:none;

    box-shadow:none!important;

}

.navbar-toggler:focus{

    box-shadow:none!important;

}
/*==================================================
HERO PREMIUM
==================================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:linear-gradient(135deg,#f8fff8,#eef6ff);

    padding-top:140px;

}

.hero h1{

    font-size:3.5rem;

    font-weight:800;

    line-height:1.2;

    margin:20px 0;

}

.hero p{

    font-size:1.15rem;

    color:#555;

    margin-bottom:35px;

}

.hero-img{

    width:100%;

    max-width:520px;

    animation:flotar 5s ease-in-out infinite;

}

.hero-stats{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:50px;

}

.stat{

    background:#fff;

    padding:20px;

    border-radius:18px;

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

    min-width:140px;

    text-align:center;

}

.stat h3{

    color:var(--color-finanzas);

    font-size:2rem;

    margin-bottom:5px;

}

.stat span{

    font-size:.9rem;

    color:#666;

}

@keyframes flotar{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}
/*==================================
PILARES
==================================*/

.pilares{

padding:100px 0;

background:#ffffff;

}

.card-pilar{

background:#fff;

padding:40px;

border-radius:22px;

text-align:center;

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

transition:.4s;

height:100%;

}

.card-pilar:hover{

transform:translateY(-12px);

}

.card-pilar i{

font-size:60px;

margin-bottom:25px;

color:var(--color-finanzas);

}

.card-pilar h3{

margin-bottom:20px;

font-size:1.6rem;

}

.card-pilar p{

margin-bottom:30px;

color:#666;

}
/*==================================
ARTÍCULOS DESTACADOS
==================================*/

.articulos{

    background:#f8f9fa;

    padding:100px 0;

}

.articulo-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

    height:100%;

}

.articulo-card:hover{

    transform:translateY(-10px);

}

.articulo-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.articulo-card .contenido{

    padding:30px;

}

.categoria{

    display:inline-block;

    background:#e8f5e9;

    color:var(--color-principal);

    padding:6px 14px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:15px;

}

.articulo-card h3{

    margin-bottom:15px;

    font-size:1.5rem;

}

.articulo-card p{

    color:#666;

    margin-bottom:25px;

}
/*==================================
ESTADÍSTICAS
==================================*/

.estadisticas{

background:linear-gradient(135deg,#2E7D32,#1565C0);

padding:90px 0;

color:white;

}

.contador{

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

padding:35px;

border-radius:20px;

backdrop-filter:blur(10px);

transition:.4s;

}

.contador:hover{

transform:translateY(-8px);

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

}

.contador h3{

font-size:3rem;

font-weight:700;

margin-bottom:10px;

color:white;

}

.contador p{

color:white;

margin:0;

}
/*==================================
VIDEOS
==================================*/

.videos{

    padding:100px 0;

    background:#ffffff;

}

.video-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.video-card:hover{

    transform:translateY(-10px);

}

.video-card iframe{

    width:100%;

    height:240px;

    border:none;

}

.video-card h3{

    padding:25px;

    text-align:center;

    font-size:1.3rem;

}
.devocional-img{
    height: 300px;
    object-fit: cover;
    width: 100%;
}
.fe-img{
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 15px;
}
.reflexion-img{
    width:100%;
    height:480px;
    object-fit:cover;
    border-radius:15px;
}
.hero-reflexion-img{
    width:100%;
    max-width:500px;
    height:auto;
    margin:auto;
}