body{
font-family: Arial;
}


/* HERO */

.hero{
    height:90vh;
    position:relative;
}

.hero-img{
    width:100%;
    height:90vh;
    object-fit:cover;
    filter:brightness(50%);
}


/* TEXTO HERO */

.hero-text{
    position:absolute;
    top:30%;
    left:13%;
    color:white;
}

.hero-text h1{
font-size:70px;
font-weight:bold;
}

.hero-text h5{
    font-size:24px;
}


/* ICONOS */

.social-top{
position:absolute;
top:30px;
right:40px;
display:flex;
gap:18px;
z-index:10;
}

.social-top a{
color:white;
font-size:22px;
transition:0.3s;
}

.social-top a:hover{
color:#7cb342;
transform:translateY(-3px);
}


/* NAVBAR */

/* BRAND CENTER */

.brand-center{
text-align:center;
position:relative;
}

/* TEXTO NORMAL */

.brand-text{
transition:0.35s;
}

/* LOGO OCULTO */

.brand-logo{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0.8);
opacity:0;
transition:0.35s;
}

.brand-logo img{
height:45px;
}

/* CUANDO HAY SCROLL */

.navbar.scrolled .brand-text{
opacity:0;
transform:translateY(-10px);
}

.navbar.scrolled .brand-logo{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

/* SECCION QUIENES SOMOS */

.about-section{
padding:50px 0;
background:#f5f5f5;
position:relative;
}

.about-container{
position:relative;
}


/* IMAGEN */

.about-image{
background:#c5cddd;
padding:40px;
}

.about-image img{
width:100%;
height:auto;
display:block;
}


/* TARJETA */

.about-card{
background:white;
padding:40px;
box-shadow:0px 10px 40px rgba(0,0,0,0.15);
position:relative;
margin-left:-120px;
}

.about-mini-title{
color:#4caf50;
font-weight:600;
margin-bottom:10px;
}

.about-title{
font-size:32px;
font-weight:bold;
margin-bottom:20px;
}

.about-text{
color:#666;
line-height:1.8;
}

/*----FIN SECCION ABOUT----*/

.carousel-indicators{
bottom:20px;
}

.carousel-indicators button{
width:40px;
height:5px;
background:#fff;
border:none;
margin:5px;
opacity:.5;
}

.carousel-item{
transition:transform .8s ease-in-out;
}

.carousel-inner .row{
flex-wrap:nowrap;
}

.carousel-indicators .active{
background:#f39c12;
opacity:1;
}

.navbar-nav .nav-link{
font-size:18px;
font-weight:600;
padding:10px 18px;
}

.navbar-nav{
align-items:center;
}

.brand-center h2{
margin:0;
font-weight:bold;
}

.brand-center p{
margin:0;
font-size:14px;
color:#666;
}

/*----Menu contenedor----*/
.menu-container{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
}

.menu-left,
.menu-right{
display:flex;
flex-direction:row;
gap:30px;
}

.brand-center{
text-align:center;
}

.brand-center h2{
margin:0;
font-weight:bold;
}

.brand-center p{
margin:0;
font-size:14px;
color:#666;
}

/* BOTON SUBIR */

.scroll-top{
position:fixed;
bottom:30px;
right:30px;
background:#7cb342;
color:white;
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
text-decoration:none;
border-radius:4px;
box-shadow:0 6px 20px rgba(0,0,0,0.2);
transition:all .3s;
z-index:999;
}

.scroll-top:hover{
background:#5a9216;
transform:translateY(-3px);
}

/* SECCION MISION VISION */

.mision-vision{
background:#f5f5f5;
padding:80px 0;
}

.mv-card{
background:#fff;
padding:40px;
margin:20px;
box-shadow:0px 10px 40px rgba(0,0,0,0.1);
}

.mv-title{
color:#7cb342;
font-size:32px;
font-weight:bold;
margin-bottom:10px;
}

.mv-line{
display:flex;
align-items:center;
margin-bottom:20px;
}

.line-blue{
width:80px;
height:5px;
background:#3f6ab3;
margin-right:10px;
}

.line-gray{
width:100px;
height:5px;
background:#999;
}

.mv-card p{
color:#666;
line-height:1.8;
font-size:18px;
}

/* SECCION EVENTOS */

.eventos-section{
background:#f5f5f5;
padding:80px 0;
}

.eventos-mini{
color:#7cb342;
font-weight:bold;
}

.eventos-title{
font-size:42px;
font-weight:bold;
margin-top:10px;
}


/* TARJETA EVENTO */

.evento-card{
background:#fff;
box-shadow:0px 10px 30px rgba(0,0,0,0.1);
margin-bottom:30px;
transition:0.3s;
}

.evento-card:hover{
transform:translateY(-5px);
}

.evento-img{
position:relative;
}

.evento-img img{
width:100%;
display:block;
}


/* FECHA */

.evento-fecha{
position:absolute;
top:15px;
left:15px;
background:#7cb342;
color:white;
padding:8px 15px;
font-weight:bold;
}


/* TEXTO */

.evento-body{
padding:25px;
text-align:center;
}

.evento-body h4{
color:#7cb342;
margin-bottom:10px;
}

.evento-body p{
color:#555;
}


/* BOTON EVENTOS */

.btn-eventos{
display:inline-block;
padding:12px 35px;
border:2px solid #7cb342;
color:#333;
border-radius:12px;
text-decoration:none;
font-size:18px;
transition:0.3s;
}

.btn-eventos:hover{
background:#7cb342;
color:white;
}

/* SECCION GRUPO IMPULSOR */

.grupo-section{
height:90vh;

background-image:url("../img/coworking.avif");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

position:relative;
display:flex;
align-items:center;
}


/* CAPA AZUL */

.grupo-overlay{
width:65%;
height:100%;

background:linear-gradient(135deg,#1e5f9c,#6a4bc4);

clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);

display:flex;
align-items:center;

padding:80px 100px;
}


/* CONTENIDO */

.grupo-contenido{
max-width:600px;
color:white;
}

.grupo-mini{
color:#8bc34a;
font-weight:bold;
margin-bottom:15px;
}

.grupo-titulo{
font-size:42px;
font-weight:bold;
margin-bottom:20px;
}

.grupo-contenido p{
line-height:1.8;
opacity:.9;
}


/* BOTON */

.btn-grupo{
display:inline-block;
margin-top:25px;
padding:12px 55px;

border:2px solid #8bc34a;
color:white;
text-decoration:none;

border-radius:8px;
transition:.3s;
}

.btn-grupo:hover{
background:#8bc34a;
color:white;
}


/* SECCION MENTORES */

.mentores-section{
padding:100px 0;
background:#f7f7f7;
}

.mentor-mini{
color:#7cb342;
font-weight:600;
margin-bottom:10px;
}

.mentor-title{
font-size:42px;
font-weight:bold;
margin-bottom:60px;
}


/* CARD */

.mentor-card{
background:white;
padding:100px 30px 40px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
text-align:center;
position:relative;
margin-top:80px;
transition:all .35s ease;
}

/* CARD HOVER */

.mentor-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* FOTO SOBRE EL CARD */

.mentor-avatar{
position:absolute;
top:-70px;
left:50%;
transform:translateX(-50%);
}

.mentor-avatar img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
border:8px solid #f7f7f7;
transition:0.4s;
}

/* BORDE VERDE HOVER */

.mentor-card:hover .mentor-avatar img{
border-color:#7cb342;
}


/* FOTO */

.mentor-img{
width:120px;
height:120px;
border-radius:50%;
object-fit:cover;
margin-top:-80px;
border:8px solid #f7f7f7;
margin-bottom:20px;
}


/* TEXTO */

.mentor-card h4{
color:#7cb342;
margin-bottom:10px;
}

.mentor-card p{
color:#555;
margin-bottom:20px;
}


/* REDES */

.mentor-social a{
color:#333;
font-size:20px;
margin:0 8px;
transition:.3s;
}

.mentor-social a:hover{
color:#7cb342;
}


/* BOTON */

.btn-mentores{
display:inline-block;
margin-top:0px;
padding:12px 40px;
border:2px solid #7cb342;
border-radius:12px;
text-decoration:none;
color:#333;
font-weight:600;
transition:.3s;
}

.btn-mentores:hover{
background:#7cb342;
color:white;
}


/* INDICADORES */

.mentor-indicators{
position:relative;
margin-top:40px;
}

.mentor-indicators button{
width:40px;
height:5px;
background:#fff;
border:none;
margin:5px;
opacity:.5;
}

.mentor-indicators .active{
background:#f39c12;
opacity:1;
}


/* SECCION SERVICIOS */

.servicios-section{
padding:60px 0;
background: linear-gradient(135deg,#7b2cbf,#4361ee);
color:white;
}

.servicios-title{
font-size:48px;
font-weight:bold;
margin-bottom:10px;
}

.servicios-sub{
opacity:0.9;
font-size:18px;
}

/* CARD */

.servicio-card{
padding:30px 10px;
border-radius:12px;
transition:0.35s;
cursor:pointer;
}

.servicio-card:hover{
background:rgba(255,255,255,0.1);
transform:translateY(-8px);
}

/* ICONO */

.servicio-icon{
font-size:50px;
margin-bottom:20px;
display:block;
}

/* TITULO */

.servicio-card h5{
font-size:14px;
font-weight:600;
line-height:1.4;
}

/* FOOTER */

.footer-section{
background:#1e1e2f;
color:white;
padding:60px 0 10px;

}

/* TITULOS */

.footer-section h4,
.footer-section h5{
margin-bottom:20px;
font-weight:bold;

}

/* TEXTOS */

.footer-section p{
opacity:0.8;
line-height:1.6;
}

/* LINKS */

.footer-links ul{
list-style:none;
padding:0;

}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:white;
text-decoration:none;
opacity:0.8;
transition:0.3s;
}

.footer-links a:hover{
color:#7cb342;
}

/* REDES */

.footer-social{
margin-top:20px;

}

.footer-social a{
color:white;
font-size:22px;
margin-right:15px;
transition:0.3s;

}

.footer-social a:hover{
color:#7cb342;
transform:translateY(-3px);

}

/* FORM */

.footer-contact input,
.footer-contact textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border:none;
border-radius:6px;
}

.footer-contact button{
width:100%;
padding:10px;
background:#7cb342;
border:none;
color:white;
border-radius:6px;
font-weight:bold;
transition:0.3s;
}

.footer-contact button:hover{
background:#689f38;
}

/* BOTTOM */
.footer-bottom{
text-align:center;
margin-top:20px;
opacity:0.7;
}


/*----PAGINA WEB DE SERVICIOS----*/
.services-page{
padding:100px 0;
background:#f5f7fa;
}

.services-mini{
color:#7cb342;
letter-spacing:3px;
font-weight:600;
}

.services-title{
font-size:42px;
font-weight:700;
margin:10px 0;
}

.services-sub{
max-width:700px;
margin:auto;
color:#666;
}


.service-card{
display:flex;
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,0.08);
transition:0.3s;
height:100%;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}


.service-card img{
width:220px;
object-fit:cover;
}


.service-content{
padding:30px;
}

.service-content h4{
font-weight:700;
margin-bottom:10px;
color:#2d2d2d;
}

.service-content p{
color:#666;
line-height:1.7;
font-size:15px;
}

/*---FIN---*/

.eventos-page{
padding-top:100px;
padding-bottom:100px;
background:#f5f5f5;
}

.evento-mini{
color:#7cb342;
font-weight:600;
letter-spacing:2px;
}

.evento-title{
font-size:42px;
font-weight:bold;
margin-bottom:10px;
}

.evento-desc{
font-size:18px;
color:#555;
max-width:700px;
margin:auto;
}

/* CARD EVENTO */

.event-item{

display:flex;
background:white;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
margin-bottom:35px;
overflow:hidden; /* CLAVE */

}

/* IMAGEN */

.event-img{
width:260px;
flex-shrink:0;
position:relative;
}


.event-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* FECHA */

.event-fecha{

position:absolute;
top:15px;
left:15px;

background:#7cb342;
color:white;

padding:6px 12px;
border-radius:6px;

font-size:14px;
font-weight:500;

display:flex;
align-items:center;
gap:6px;

box-shadow:0 5px 15px rgba(0,0,0,0.2);

}

/* CONTENIDO */

.event-content{
flex:1;
padding:25px 30px;
}

.event-content h3{

color:#7cb342;
font-weight:700;
margin-bottom:10px;

}

.event-content ol{

padding-left:18px;
margin-bottom:15px;

}

/* INFO */

.event-info{

display:flex;
gap:25px;
font-size:15px;
color:#444;
margin-top:10px;

}

.event-info i{

margin-right:6px;
color:#7cb342;

}

/* BOTONES */

.event-actions{
display:flex;
flex-direction:column;
gap:12px;
padding:25px;
}

.btn-evento-outline{
border:2px solid #7cb342;
padding:10px 20px;
border-radius:8px;
text-decoration:none;
color:#333;
text-align:center;
transition:0.3s;
}

.btn-evento-outline:hover{
background:#7cb342;
color:white;
}

.btn-filtro{
border:2px solid #7cb342;
background:white;
color:#333;
padding:8px 18px;
border-radius:20px;
margin:5px;
transition:0.3s;
}

.btn-filtro:hover,
.btn-filtro.active{
background:#7cb342;
color:white;
}

.pagination .page-link{
color:#7cb342;
border:1px solid #7cb342;

}

.pagination .active .page-link{
background:#7cb342;
border-color:#7cb342;
color:white;

}

/* ---------- RESPONSIVE MENU ---------- */

@media (max-width: 991px){
    .menu-container{
    flex-direction:column;
    text-align:center;
    }
    
    .menu-left,
    .menu-right{
    flex-direction:column;
    gap:10px;
    }
    
    .brand-center{
    order:-1;
    margin-bottom:15px;
    }
    
    .navbar-nav{
    width:100%;
    }
    
    .hero-text{
    left:8%;
    top:35%;
    }
    
    .hero-text h1{
    font-size:42px;
    }
    
    .hero-text h5{
    font-size:20px;
    }
    
    .about-card{
    margin-left:0;
    margin-top:20px;
    }
}

/* ---------- RESPONSIVE MISION Y VISION ---------- */
@media (max-width:768px){
    .mv-card{
    margin:10px 0;
    }
    
    .mv-title{
    font-size:26px;
    }
    
    .mv-card p{
    font-size:16px;
    }
}

/* ---------- RESPONSIVE EVENTOS ---------- */
@media (max-width:768px){
    .eventos-title{
    font-size:32px;
    }
    
    .evento-body{
    text-align:left;
    }
}

@media (max-width:991px){
    .grupo-texto{
    clip-path:none;
    padding:40px;
    }
    
    .grupo-titulo{
    font-size:30px;
    }
    
    .grupo-imagen{
    min-height:300px;
    }
}

@media (max-width:768px){

.evento-item{
flex-direction:column;
}

.evento-img{
width:100%;
height:200px;
}

.evento-content{
padding:20px;
}

.evento-actions{
flex-direction:row;
justify-content:flex-start;
padding:0 20px 20px 20px;
}

.btn-evento-outline{
flex:1;
text-align:center;
}

.evento-info{
flex-direction:column;
gap:5px;
}

}
