/*==================================================
  FINANZAS.CSS
  Impulso con Propósito
==================================================*/

/* HERO */

.hero-finanzas{

    padding:170px 0 100px;

    background:linear-gradient(135deg,#e8f5e9,#ffffff);

}

.hero-finanzas h1{

    font-size:3.2rem;

    font-weight:800;

    color:#1b5e20;

    margin-bottom:20px;

}

.hero-finanzas p{

    font-size:1.15rem;

    color:#555;

    margin-bottom:30px;

}

.hero-finanzas img{

    max-width:500px;

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

}

/* CATEGORÍAS */

.categoria-finanzas{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.categoria-finanzas:hover{

    transform:translateY(-10px);

}

.categoria-finanzas i{

    font-size:55px;

    color:#2E7D32;

    margin-bottom:20px;

}

.categoria-finanzas h3{

    margin-bottom:15px;

}

.categoria-finanzas p{

    color:#666;

}

/* PRÓXIMAMENTE */

.proximamente{

    background:#f8f9fa;

    padding:80px 0;

}

.proximamente h2{

    color:#1565C0;

    margin-bottom:20px;

}

/* ANIMACIÓN */

@keyframes flotar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================
BUSCADOR
==================================*/

.buscador-finanzas{

    padding:60px 0;

    background:#ffffff;

}

.buscador-box{

    display:flex;

    gap:15px;

}

.buscador-box input{

    height:58px;

    border-radius:50px;

    padding:0 25px;

    border:2px solid #ddd;

}

.buscador-box button{

    border-radius:50px;

    padding:0 30px;

}
/*==================================================
ARTÍCULO DESTACADO
==================================================*/

.articulo-destacado{

    padding:100px 0;

    background:#f8fafc;

}

.articulo-destacado img{

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.articulo-destacado h2{

    font-size:2.4rem;

    font-weight:700;

    margin:20px 0;

    color:#1b4332;

}

.articulo-destacado p{

    font-size:1.05rem;

    color:#555;

    margin-bottom:25px;

}

.lista-destacado{

    list-style:none;

    padding:0;

}

.lista-destacado li{

    padding:8px 0;

    font-size:1rem;

    color:#444;

}

.sombra{

    transition:.35s;

}

.sombra:hover{

    transform:scale(1.02);

}
/*==================================================
ÚLTIMOS ARTÍCULOS
==================================================*/

.ultimos-articulos{

    padding:100px 0;

    background:#ffffff;

}

.ultimos-articulos .articulo-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.ultimos-articulos .articulo-card:hover{

    transform:translateY(-10px);

}

.ultimos-articulos img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.ultimos-articulos .contenido{

    padding:25px;

}

.ultimos-articulos .categoria{

    display:inline-block;

    background:#e8f5e9;

    color:#2E7D32;

    padding:6px 14px;

    border-radius:30px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:15px;

}

.ultimos-articulos h3{

    font-size:1.4rem;

    margin-bottom:15px;

}

.ultimos-articulos p{

    color:#666;

    margin-bottom:20px;

}
/*==================================================
HERRAMIENTAS FINANCIERAS
==================================================*/

.herramientas-financieras{

    padding:100px 0;

    background:#f8f9fa;

}

.tool-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

    height:100%;

}

.tool-card:hover{

    transform:translateY(-10px);

}

.tool-card i{

    font-size:55px;

    color:#2E7D32;

    margin-bottom:20px;

}

.tool-card h4{

    margin-bottom:15px;

}

.tool-card p{

    color:#666;

    min-height:60px;

}
/*==================================================
CALCULADORA
==================================================*/

.calculadora-presupuesto{

    background:#ffffff;

    padding:100px 0;

}

.calculadora-box{

    background:#fff;

    padding:40px;

    border-radius:25px;

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

}

.resultado{

    font-size:1.2rem;

    font-weight:600;

    text-align:center;

    padding:20px;

    border-radius:15px;

    background:#f8f9fa;

}
/*==================================================
GRÁFICO DE PRESUPUESTO
==================================================*/

.grafico-presupuesto{

    margin-top:40px;

}

.barra{

    margin-bottom:25px;

}

.barra span{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.barra-fondo{

    width:100%;

    height:22px;

    background:#ececec;

    border-radius:30px;

    overflow:hidden;

}

.barra-color{

    width:0%;

    height:100%;

    border-radius:30px;

    transition:1s;

}

.ingresos{

    background:#28a745;

}

.gastos{

    background:#dc3545;

}

.ahorro{

    background:#0d6efd;

}

.disponible{

    background:#ffc107;

}