@import url(base.css);
/*inicio filosofia*/
.filosofia{
    padding: 40px;
}
.filosofiaCont{
    position: relative;
    max-width: 1200px;
    margin: auto;
    height: 650px;
}
.filosofiaTitulo{
    width: 750px;
    height: 250px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.filosofiaTitulo h1{
    font-weight: bold;
    font-size: 40px;
    color: var(--azulMedio);
}
.filosofiaPath{
    width: 750px;
    height: 650px;
    position: absolute;
    clip-path: path("M 20,250 L 280,250 A 20,20 0,0,0 300,230 L 300,20 A 20,20 0,0,1 320,0 L 730,0 A 20,20 0,0,1 750,20 L 750,380 A 20,20 0,0,1 730,400 L 470,400 A 20,20 0,0,0 450,420 L 450,630 A 20,20 0,0,1 430,650 L 20,650 A 20,20 0,0,1 0,630 L 0,270 A 20,20 0,0,1 20,250 Z");
    top: 0;
    right: 0;
    background-image: url("../img/home1.jpeg");
    background-repeat: no-repeat;
    background-position: 10% 25%;
}
.masQue{
    width: 450px;
    height: 400px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    padding: 40px;
}
.masQue p{
    text-align: center;
    font-size: 20px;
    color: var(--azulOscuro);
}
.masQue p span{
    color: var(--azulMedio);
    font-weight: bold;
    font-size: 20px;
}
.cursiva{
    font-style: italic;
    font-size: 20px;
}
.siendoParte{
    width: 300px;
    height: 250px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
.siendoParte p{
    max-width: 200px;
    font-weight: bold;
    font-size: 20px;
    color: var(--azulMedio);
    text-align: center;
}
/*final filosofia*/



/*inicio compromiso*/
.compromiso{
    background-color: var(--azulMedio);
    padding: 40px;
}
.compromisoCont{
    max-width: 1200px;
    margin: auto;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    gap: 40px;
}
.compromisoImg{
    max-width: 630px;
    border-radius: 20px;
    overflow: hidden;
}
.compromisoImg img{
    width: 100%;
    height: 100%;
}
.compromisoText{
    max-width: 450px;
}
.compromisoText p{
    text-align: center;
    color: var(--blanco);
    font-size: 20px;
}
.compromisoText p span{
    font-size: 20px;
    font-weight: bold;
}
/*fin compromiso*/



/*inicio equipo*/
.equipo{
    padding: 40px;
}
.equipoCont{
    max-width: 1200px;
    margin: auto;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}
.card{
    width: 350px;
    height: 350px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px 0px;
    text-align: center;
    transition: all 0.3s ease;
}
.card::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--negro);
    z-index: -2;
}
.card::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--negro);
    z-index: -1;
    background-image: url("../img/equipo.jpg");
    background-position: center;
    background-size: 100% 100%;
    transition: all 0.3s ease;
    opacity: 0.75;
}
.card:hover::after{
    background-size: 120% 120%;
    opacity: 0.5;
}
.titulo{
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    transition: all 0.3s ease;
}
.card:hover .titulo{
    top: 40px;
    left: 0%;
    translate: -0% -0%;
}
.texto{
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% -0%;
    transition: all 0.3s ease;
    font-size: 20px;
    max-width: 270px;
    width: 100%;
}
.card:hover .texto{
    top: calc(50% + 20px);
    translate: -50% -50%;
}
/*final equipo*/
@media only screen and (min-width: 0px) and (max-width: 1200px){
    /*inicio filosofia*/
    .filosofia{
        padding: 20px;
        background-image: url("../img/home1.jpeg");
        background-repeat: no-repeat;
        background-position: 30% 25%;
        height: calc(100vh - 80px);
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
    }
    .filosofiaCont{
        height: auto;
        z-index: 1;
        max-width: 650px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        gap: 20px;
        position: relative;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.4);
        background: rgba(255, 255, 255, 0.60);
        overflow: hidden;
        border-top: 2px solid rgba(255, 255, 255, 0.5);
        border-left: 2px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(3px);
    }
    .filosofiaPath{
        display: none;
    }
    .filosofiaTitulo{
        width: auto;
        height: auto;
        position: inherit;
        margin-bottom: 20px;
    }
    .filosofiaTitulo h1{
        text-align: center;
        font-size: 30px;
    }
    .masQue{
        width: auto;
        height: auto;
        position: inherit;
        padding: 0px;
        margin-bottom: 20px;
    }
    .masQue p, .masQue p span, .cursivas{
        font-size: 16px;
    }
    .siendoParte{
        width: auto;
        height: auto;
        position: inherit;
    }
    .siendoParte p{
        font-size: 16px;
    }
    /*final filosofia*/



    /*inicio compromiso*/
    .compromiso{
        padding: 20px;
    }
    .compromisoCont{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        gap: 20px;
    }
    .compromisoText p, .compromisoText p span{
        font-size: 16px;
    }
    /*final compromiso*/



    /*inicio equipo*/
    .equipo{
        padding: 20px;
    }
    .equipoCont{
        max-width: 1200px;
        margin: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        gap: 20px;
    }
    .card{
        width: 300px;
        height: 300px;
    }
    .card::after{
        background-size: 120% 120%;
        opacity: 0.5;
    }
    .card .titulo{
        top: 40px;
        left: 0%;
        translate: -0% -0%;
        font-size: 30px;
    }
    .card .texto{
        top: calc(50% + 20px);
        translate: -50% -50%;
        font-size: 16px;
    }
    /*final equipo*/
}