body{
    background: linear-gradient(135deg,#1abc9c,#2ecc71,#27ae60);
    font-family:'Segoe UI', sans-serif;

    min-height:100vh;
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
}

/* ===== NAVBAR ===== */

.navbar{
    background: linear-gradient(90deg,#2c3e50,#34495e);
    box-shadow:0 5px 15px rgba(0,0,0,0.4);
}

.navbar-brand{
    font-weight:bold;
    color:#2ecc71 !important;
}

.nav-link{
    color:white !important;
    margin-left:10px;
    transition:0.3s;
}

.nav-link:hover{
    color:#2ecc71 !important;
}
/* ===== HERO ===== */

.hero{
    height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-contenido{
    background:rgba(0,0,0,0.5);
    padding:40px;
    border-radius:20px;
    color:white;
    max-width:650px;
}

.hero h1{
    font-size:45px;
    margin-bottom:15px;
}

.hero p{
    font-size:20px;
    margin-bottom:20px;
}



/* ===== TITULOS ===== */

h1,h2{
    text-align:center;
    margin:30px 0;
    color:white;
    text-shadow:2px 2px 10px rgba(0,0,0,0.5);
}

/* ===== CAJA TEXTO ===== */

.info-box{
    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    line-height:1.7;
}

/* ===== IMAGEN HISTORIA ===== */

.img-historia{
    max-width:420px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* ===== CARDS ===== */

.card{
    border:none;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,0.3);
    transition:0.4s;
}

.card img{
    height:230px;
    object-fit:cover;
}

.card:hover{
    transform:translateY(-8px) scale(1.03);
}

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

.btn{
    border-radius:25px;
    font-weight:bold;
}
.progress{
    height:25px;
    margin-bottom:80px;
}

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

footer{
    margin-top:auto;
    background:#2c3e50;
    color:white;
    text-align:center;
    padding:20px;
}

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

@media (max-width:768px){

    .card img{
        height:180px;
    }

}

@media (max-width:576px){

    h1{
        font-size:28px;
    }

}