@import url(base.css);
.home{
    background-image: url("../img/home2.jpeg");
    height: calc(100vh - 100px);
    background-size: cover;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: stretch;
    position: relative;
}
.home::after{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.0);
}
.homeBox{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}
.videoCont{
    border-radius: 10px;
    max-width: 350px;
    z-index: 1;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.4);
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
}
.homeContent{
    z-index: 1;
    max-width: 650px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
    gap: 30px;
    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);
}
.homeContent h1, .certificadoTexto h2{
    font-size: 40px;
    font-weight: bold;
    color: var(--azulMedio);
    text-align: left;
}
.homeContent h2, .certificadoTexto h3{
    font-size: 20px;
    font-weight: 400;
    color: var(--azulOscuro);
    text-align: left;
}
.homeContent img{
    width: 100%;
    height: 100px;
}
.homeContent a, .homeBoton{
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--azulClaro);
    font-weight: bold;
    font-size: 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px transparent solid;
}
.homeContent a:hover, .homeBoton:hover{
    background-color: var(--blanco);
    border-color: var(--azulClaro);
    color: var(--azulClaro);
}
.heroBanner{
    width: 100%;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}
.heroBanner img{
    width: 100%;
    height: 100%;
}
.logo{
    max-width: 100px;
    max-height: 100px;
}
.textoPcnet{
    max-width: 80%;
    width: 100%;
    height: auto;
}
.beneficios{
    background-color: var(--semiblanco);
    min-height: 700px;
    padding: 20px;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	align-content: stretch;
    position: relative;
    z-index: 2;
    gap: 40px;
}
.beneficios::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(../img/patron.avif);
  opacity: 0.02;
  z-index: -1;
}
.beneTitles{
    margin: auto;
}
.beneTitles h2{
    text-align: center;
    color: var(--azulMedio);
    font-size: 40px;
    position: relative;
}
.beneTitles h2::after{
    content: "";
    position: absolute;
    translate: -50% -50%;
    bottom: -10px; left: 50%;
    height: 3px;
    width: 100px;
    background-color: var(--azulClaro);
}
.beneficiosCont{
    margin: auto;
    max-width: 1200px;
    width: 100%;
    height: auto;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
    gap: 30px;
}
.beneCard{
    width: 320px;
    padding: 20px;
    height: 200px;
    border-radius: 10px;
    transition: all 0.3s ease;
    background-color: var(--semiblanco);
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1), -6px -6px 6px white;
    position: relative;
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
    gap: 20px;
}
.beneCard:hover{
    box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.15), -10px -10px 10px white;
}
.beneTop{
    display: flex;
    flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
    gap: 20px;
}
.beneIcon{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
    min-width: 51px;
    min-height: 51px;
    border-radius: 50%;
    border: 2px dashed var(--azulMedio);
}
.beneIcon i{
    font-size: 20px;
    color: var(--azulClaro);
}
.beneCard h3{
    text-align: center;
    color: var(--azulMedio);
}
.beneCard span{
    margin-top: 10px;
    text-align: center;
    color: var(--azulOscuro);
}
/*inicio mejorOpcion*/
.mejorOpcion{
    background-color: var(--azulMedio);
    padding: 40px;
}
.caract{
    max-width: 1200px;
    margin: auto;
    background-color: var(--azulOscuro);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1);
}
.caract h2{
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
}
.caractCont{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}
.caracteristica{
    max-width: 200px;
    height: 250px;
    padding: 10px;
    background-color: var(--gris);
    border-radius: 10px;
}
.arriba{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}
.iconoCont{
    border-radius: 100%;
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-bottom: 30px;
    background-color: var(--azulMedio);
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}
.iconoCont i{
    font-size: 40px;
}
.abajo{
    max-width: 180px;
    height: 80px;
    background-color: var(--blanco);
    padding: 10px;
    border-radius: 5px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}
.abajo p{
    color: var(--azulOscuro);
    text-align: center;
}
/*final mejorOpcion*/
.certificadoCont{
    background-color: transparent;
    height: 700px;
    padding: 40px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.certificadoCont::before, .certificadoCont::after{
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background-color: var(--azulClaro);
    opacity: 0.15;
    clip-path: circle();
    top: 10%;
    left: 10%;
    translate: -50% -50%;
    z-index: -1;
}
.certificadoCont::after{
    background-color: var(--azulMedio);
    top: 90%;
    left: 90%;
}
.certificadoBox{
    margin: auto;
    max-width: 1200px;
    height: 620px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
    gap: 40px;
    padding: 40px 0px;
}
.certificadoTexto{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
    gap: 40px;
}
.certificadoTitulos h2{
    text-align: center;
}
.certificadoTitulos h3{
    margin-top: 20px;
}
.certificadoLista{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: baseline;
	align-content: stretch;
    gap: 20px;
}
.certificadoLinea i{
    color: var(--azulClaro);
    font-size: 20px;
}
.certificadoLinea span{
    color: var(--azulOscuro);
    margin-left: 10px;
}
.certificadoBandera{
    width: 250px;
    position: relative;
    margin-top: -80px;
}
.consultor{
    width: 200px;
    position: absolute;
    translate: -50% -50%;
    left: 50%;
    top: 40%;
}
.bandera{
    z-index: 1;
}
/*inicio preguntas*/
.preguntas{
    background-color: var(--azulMedio);
    padding: 40px;
}
.preguntas h2{
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}
.preguntasCont{
    margin: auto;
    max-width: 1200px;
    margin-top: 40px;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
    gap: 20px;
}
.preguntasCont input[type="checkbox"]{
    display: none;
}
.preguntasColumna{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
    gap: 20px;
}
.preguntaDropdown{
    border-radius: 10px;
    background-color: var(--blanco);
    width: 600px;
}
.pregunta{
    height: 50px;
    display: inline-block;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}
.pregunta p{
    color: var(--azulMedio);
    font-weight: bold;
    font-size: 20px;
}
.pregunta i{
    color: var(--azulMedio);
    font-size: 20px;
    height: 9px;
    transform: rotate(180deg);
    transition: all 0.3s ease;
}
.preguntaTexto{
    max-height: 0px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.preguntaDropdown input:checked ~ .preguntaTexto{
    max-height: 500px;
}
.preguntaDropdown input:checked ~ .pregunta i{
    transform: rotate(0deg);
}
.preguntaTexto p{
    color: var(--azulOscuro);
    padding: 10px;
}
.preguntasMobile{
    display: none;
}
/*final preguntas*/
@media only screen and (min-width: 0px) and (max-width: 1200px) {
    .home{
    /*height: calc(100vh - 80px);*/
    height: auto;
    background-position: center;
    }
    .videoCont{
        height: calc(100vh - 120px);
        max-height: 620px;
        width: auto;
    }
    .homeBox{
        padding: 20px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: stretch;
        gap: 20px;
    }
    .logo{
        max-width: 80px;
        max-height: 80px;
    }
    .textoPcnet{
        max-width: 70%;
        width: 100%;
        height: auto;
    }
    .homeContent{
        gap: 20px;
        max-width: 100%;
        margin: auto;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.4);
    }
    .homeContent h1{
        font-size: 30px;
        font-weight: bold;
        color: var(--azulMedio);
        text-align: left;
    }
    .homeContent h2{
        font-size: 20px;
        font-weight: 400;
        color: var(--azulOscuro);
        text-align: left;
    }
    .beneTitles h2{
        font-size: 30px;
    }
    .beneficiosCont{
        justify-content: center;
    }
    /*inicio mejorOpcion*/
    .caract{
        padding: 20px;
    }
    .caract h2{
        font-size: 30px;
        margin-bottom: 20px;
    }
    .mejorOpcion{
        background-color: var(--azulMedio);
        padding: 20px;
    }
    .caractCont{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: stretch;
        gap: 20px;
    }
    /*final mejorOpcion*/
    .certificadoCont{
        padding: 20px;
        height: auto;
    }
    .certificadoBox{
        padding: 0px;
        height: auto;
    }
    .certificadoTitulos h2{
        font-size: 30px;
    }
    .certificadoBandera{
        display: none;
    }
    .certificadoCont::after{
        top: 110%;
        left: 110%;
    }
    .certificadoCont::before{
        top: -10%;
        left: -10%;
    }
    .preguntas{
        padding: 20px;
    }
    .preguntas h2{
        font-size: 30px;
        margin-bottom: 20px;
    }
    .preguntasCont{
        display: none;
    }
    .preguntasMobile{
        display: block;
    }
    .preguntasMobile input[type="checkbox"]{
        display: none;
    }
    .preguntaDropdown{
        width: 100%;
        margin-bottom: 20px;
    }
}