body {
	background-color: rgb(245, 245, 245);	
    font-family: "Poppins", sans-serif;   
}
#masthead{
	padding-top: 200px;
	padding-bottom: 200px; 
	text-align: center;
	background-image: url("/assets/img/IMG_5093.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;		
	margin-bottom: 50px;
	position: relative;
	z-index: -1;		
}

.banner-masthead {
	background-color: white;
	position: relative;
	margin: 0 auto;
	max-width: 1400px;
	bottom: -15rem;
	padding: 20px;
	border-radius: 5px;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
	color: #004d0b;
	width: 200px;	 
}  

#masthead .masthead-heading {
    font-size: 25px; 
    font-weight: 700;
}

@media (min-width: 768px) {
	.banner-masthead {width: 400px;}  

	.masthead .masthead-heading {font-size: 80%;}	
}


/*---------------------------------------------------------------------------------------*/
/* GALERIA
/*---------------------------------------------------------------------------------------*/
#gallery{
    margin: 6rem 0;
}

#gallery img {
    cursor: pointer; 
}

.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: auto auto;  
    grid-template-areas:"columna1 columna2 columna3"; 
    gap: 20px;  
    align-items: stretch;  
}


.columna1, .columna2, .columna3 {
    display: flex; 
    flex-direction: column;
    align-items: stretch; 
} 

.imagen, .cuadrada, .rectangular {
    width: 100%;
    height: 100%;
    object-fit: cover;    
}
.columna1 {
    grid-area: columna1;
}

.columna2 {
    grid-area: columna2;
    display: grid;  
    gap: 10px; 
    object-fit: cover; 
}

.columna3 {
    grid-area: columna3;
    display: grid; 
    gap: 10px;     
    object-fit: cover; 
}

.cuadradas {
    display: grid;
    grid-template-rows: repeat(2, 1fr);  
    gap: 10px;  
}

.cuadradas-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
    grid-template-rows: repeat(2, 1fr);   
    gap: 10px;  
}
/*---------------------------------------------------------------------------------------*/
/* ACTIVIDADES
/*---------------------------------------------------------------------------------------*/
#activity{
    padding-top: 5rem;
    background-color: white;
}

#activity h2 {
    font-size: 38px;
    font-weight: 600;
    color: #004d0b;
}

#activity hr {
    height: 4px; 
	background-color: #ce9718; 
	margin: 1rem auto;
	border: none;
	width: 5%; 
	opacity: 1;
}

.area1, .area2, .area3, .area4, .area5, .area6 {
    padding: 2rem 0;
}

.area1 { background-color: #004d00; } /* Verde muy oscuro */
.area2 { background-color: #006400; } /* Verde oscuro */
.area3 { background-color: #228B22; } /* Verde bosque */
.area4 { background-color: #32CD32; } /* Verde lima */
.area5 { background-color: #3aa83a; } /* Verde claro */
.area6 { background-color: #125e12; } /* Verde muy claro */

#activity .row{
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}
/*---------------------------------------------------------------------------------------*/
/* Etapas
/*---------------------------------------------------------------------------------------*/
#etapas{  
    padding: 2rem 0 5rem 0; 
    background-color: white; 
}

#etapas h2 {
    font-size: 38px;
    font-weight: 600;
    color: #004d0b;
}

#etapas hr {
    height: 4px; 
	background-color: #ce9718; 
	margin: 1rem auto;
	border: none;
	width: 5%; 
	opacity: 1;
}


#etapas i {
    color: #004d0b;
}

/*---------------------------------------------------------------------------------------*/
/* BANNER
/*---------------------------------------------------------------------------------------*/

#banner {
	background-color: #004d00;
	padding: 30px;
}

/*---------------------------------------------------------------------------------------*/
/* SECCION DESCRIPCION
/*---------------------------------------------------------------------------------------*/
#description{
    margin: 5rem auto;
    max-width: 1700px;
}

#description i{
	padding-top: 10px;
	font-size: 25px;
}

#description .info {
    background-color: #006400;
}

/*---------------------------------------------------------------------------------------*/
/* COMPETENCIAS
/*---------------------------------------------------------------------------------------*/

#competencias{
    margin: 5rem auto;
    max-width: 1700px;
}

#competencias h2 {
    font-size: 38px;
    font-weight: 600;
    color: #004d0b;
}

#competencias hr {
    height: 4px; 
	background-color: #ce9718; 
	margin: 1rem auto;
	border: none;
	width: 5%; 
	opacity: 1;
}

#competencias i {
    color: #004d0b;
}

#competencias .row{
    margin-top: 3rem;
}

#competencias .card{
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
}

#competencias .card:hover {
    box-shadow: 15px 15px 0px #004d0b; 
}
/*---------------------------------------------------------------------------------------*/
/* PERFIL DE INGRESO Y EGRESO
/*---------------------------------------------------------------------------------------*/
#profile {
    padding-top: 5rem;
    background-color: white;
}

#profile h2 {
    font-size: 38px;
    font-weight: 600;
    color: #004d0b;   
}

#profile hr {
    height: 4px; 
	background-color: #ce9718; 
	margin: 1rem auto;
	border: none;
	width: 5%; 
	opacity: 1;
}

#profile .sublista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

#profile .row{
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}

/*---------------------------------------------------------------------------------------*/
/* MAPA CURRICULAR
/*---------------------------------------------------------------------------------------*/
#mapa-curricular {  
    padding: 5rem 4rem;
    margin: 0 auto;
    max-width: 1700px;
}

#mapa-curricular h2 {
    font-size: 38px;
    font-weight: 600;
    color: #004d0b;
}

#mapa-curricular hr {
    height: 4px; 
	background-color: #ce9718; 
	margin: 1rem auto;
	border: none;
	width: 5%; 
	opacity: 1;
}
  
#mapa-curricular .brutalist-card__button {
	display: flex; 
    justify-content: center; 
    align-items: center;
	width: 100%;
	height: 100px; 
	padding: 0.75rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	font-family: "Poppins", "Poppins-fallback", sans-serif;
	border: 3px solid #454545;
	background-color: #fff;
	color: #454545;
	position: relative;
	transition: all 0.2s ease;
	box-shadow: 5px 5px 0 #454545;
	overflow: hidden;
	text-decoration: none;
	margin-bottom: 1rem;
	align-items: center;
}

#mapa-curricular .brutalist-card__button::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transition: all 0.6s;
}
  
#mapa-curricular .brutalist-card__button:hover::before {
	left: 100%;
}
  
#mapa-curricular .brutalist-card__button:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 #000;
}

#mapa-curricular .brutalist-card__button--mark:hover {
	background-color: rgb(81, 171, 81);
	border-color: rgb(81, 171, 81);
	color: #fff;
	box-shadow: 7px 7px 0 green;
}


#mapa-curricular .brutalist-card__button:active {
	transform: translate(5px, 5px);
	box-shadow: none;
}
/*---------------------------------------------------------------------------------------*/
/* CAMPO PROFESIONAL
/*---------------------------------------------------------------------------------------*/
#career-field {  
    padding: 4rem 0;
    background-color: white;
}

#career-field h2 {
    font-size: 38px;
    font-weight: 600;
    color: #004d0b;
}

#career-field hr {
    height: 4px; 
	background-color: #ce9718; 
	margin: 1rem auto;
	border: none;
	width: 5%; 
	opacity: 1;
}

#career-field a {
    font-weight: 600;
}

.tab-pane li {
    padding-top: 5px;
    padding-bottom: 5px;
}

#item1-tab, #item2-tab, #item3-tab {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

#item1-tab.active, #item2-tab.active, #item3-tab.active {

    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: solid 4px darkgreen;
}


.nav-tabs, .nav-link, .nav-link.active {background-color: transparent !important;}