@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root{
    scroll-behavior: smooth;
    --padding-container:40px 0;
    /*--color-title: #001A49;*/
    --color-title: #223b69;
    

}
body{
    /*font-family: 'Poppins', sans-serif;*/
    font-family: 'Open Sans', sans-serif;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin: 0  auto;
    overflow: hidden;
    padding: var(--padding-container);
}
.hero{
    width: 100%;
    height: 98vh;
    min-height: 600px;
    max-height: 1200px;
    position: relative;
    display: grid;
    grid-template-rows: 160px 1fr;
    color: #fff;
}
.hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: linear-gradient(180deg,#0000007a 0%,#0000007a 100%),url('../imgs/EsSalud.jpeg');*/
    background-image: linear-gradient(135deg, rgb(48, 57, 99) 0%, rgba(118, 75, 162, 0.404) 80%),url('../imgs/hapImg.jpeg');
    background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 95%, 0 85%);
    z-index: -1;
}
.backHero{
    color: var(--color-title);
    text-decoration: none;
    transition: all .1s linear;
    border-radius: 25px;
    padding: 0.1rem 0.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    position: relative;
    vertical-align: middle;
}
.backHero:hover{
    background: #6586f1;
    color: #fff;
}
.nav{
    --padding-container:0;
    height: 100%;
    display: grid;
    align-items: center;
}
.navLogo{
    text-align  : center;
}
.navTitle{
    font-weight: 300;
}
.navTitleHap > span {
    font-size: 40px;
    line-height: 40px;
    margin: 0;
    position: relative;
    font-weight: 300;
    color: #fefffdd2;
    padding: 5px 0px;
    text-shadow: 2px 2px 2px #02386b;
}
.navTitleHap{
    /*background: #ccc;
    background: linear-gradient(#002457,#3e93f565);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;*/
    font-size: 1.5rem;
    /*-webkit-text-fill-color: transparent;
    -webkit-background-clip: text;*/
    color:#2091f9;
    text-shadow: 1px 1px 1px #02386b;
    /*border-radius: 50px; /*redondea lo resaltado del parrafo*/
    padding: 0px;
    /*display: inline-block;*/
    /*text-decoration:none;*/
    /*justify-self: center; /*Esto limita el resaltado celeste a solo el parrafo*/
    /*align-items: stretch;*/
    /*transition: 0.2s;
    /*border: 0.5px solid #34e607ec;*/
    /*border-radius: 10px;*/
}
.navLink{

    margin: auto;
    
    padding: 1.8rem 0.5rem;
    display: flex;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 2em;
    align-items: center;

}

.navItems{
    display: inline-block;
    list-style: none;
}

.navLinks{
    /*font-size: larger;*/
    
    color: #fdfdfd;
    text-decoration: none;
    transition: all .1s linear;
    border-radius: 25px;
    padding: 0.1rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    /*border: 0.5px solid #2091f9;*/
    box-shadow: 10px 5px 10px #0000008c;
    overflow: hidden;

}

/*animacion*/

.iconMnu{
    /*Icono de Boton*/
    margin: 0 auto;
    height: 5px;
    width: 5px;
}
.iconMenu{
    margin-right: 1px;
    width: 16px;
    height: 16px;
    fill: #0e74a3;
    vertical-align: center;
    
}
.navLinks:hover {
    background: #8dbdff3b;
    
}
.navMenu{
    margin-left: auto;
    cursor: pointer;
    display: none;
}
.navImg{
    display: block;
    width: 30px;
}
.navClose{
    display: var(--show,none);
    
}
#menuCsirt{
    display: none;
   
    /*visibility: hidden;*/
    /*overflow: hidden;*/
}

/*Hero Container*/
.acercaDe{
    display: grid;
    align-content: top;
    align-content: center;
    text-align: center;
    padding-bottom: 80px;
    margin: 20px;
    
    
}
.acercaDeBack{
    align-content: center;
    text-align: center;
}
.heroContainer{
    display: grid;
    max-width: 800px ;
    gap: 0.5rem;
    align-content: center;
    text-align: center;
    padding-bottom: 320px;
    /*padding-bottom: 160px;*/
    /*
    max-width: 800px ;
    --padding-container:0;
    display: grid;
    grid-auto-rows: max-content;
    align-content: center;
    gap: 1em;
    padding-bottom: 50px;
    padding-top: 150px;
    text-align: center;
    */
}

.heroTitulo{
    /*font: size 3rem;*/
    font-size: 50px;
	margin-top: 50px;
}
.heroParrafo{
    margin-bottom: 40px;
    line-height: 30px;
    font-weight: 300;
    font-size: 25px;
}
.cta{
    border-radius: 50px; /*redondea lo resaltado del parrafo*/
    padding: 8px 30px;
    display: inline-block;
    text-decoration: none;
    background-color: #2091f9;
    justify-self: center; /*Esto limita el resaltado celeste a solo el parrafo*/
    color: #fff;
    align-items: stretch;
    transition: 0.2s;
    border: 0.5px solid #2091f9;
}
.cta:hover{
    background-color: #02386b;
    border: 0.5px solid #fdfffcec;
}
/*About*/
.about{
    font-size: 15px;
    
    padding: 1rem 1rem;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
}
.versionDoc{
    color: var(--color-title);
    font-size: 0.8rem;
}
.subTitle{
    color: var(--color-title);
    font-size: 2rem;
    margin-bottom: 10px;

}
.aboutParrafo{
    line-height: 1.5;
}
.aboutMain{
    padding-top: 30px;
    display: flex;
    width: 90%;
    margin: 0 auto;
    gap: 1em;
    overflow: hidden;
    /*Columnas dinamicas*/
    grid-template-columns: repeat(auto-fit,minmax(260px,auto));


}
.aboutIcons{
    display: grid;
    gap: 1em;
    justify-items: center;
    width: 280px;
    overflow: hidden;
    margin: 0 auto;
}
.aboutIcon{
    width: 40px;

}
.subTituloNorm{
    margin-bottom: 1px;
    margin-top: 10px;
    color: #6586f1;
    
}
.numSubTituloNorm{
    display: inline-block;
	/*background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);*/
	/*background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);*/
	background-image: linear-gradient(135deg, #6586f160 0%, #3f327a3d 100%);
	width: 18px;
	height: 18px;
	color: var(--color-title);
	text-align: center;
	border-radius: 50%;
	font-weight: 500;
	line-height: 18px;
	margin-left: -25px;
    margin-right: 5px;
    font-size: 14px;
}

/*Knowledge*/
.knowledge{
    background-color: #e5e5f7;
    /*opacity: 0.8;*/
    /*background-image:  radial-gradient(#0c18f5 0.5px, transparent 0.5px), radial-gradient(#252dc9 0.5px, #e5e5f7 0.5px);*/
    background-size: 20px 20px;
    background-position: 0 0,10px 10px;
    overflow: hidden;
}
.knowledgeContainer{
    
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: left;

}
.knowledgeImgs{
    max-width: 300px;

}
.knowledgeParrafo{
    line-height: 1.7;
    margin-bottom: 15px;
}
.knowledgeImg{
    width: 100%;
    display: block;
}

.iconMnu{
    width: 32px;
    height: 32px;
}
.secLeyVigente{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 1em;
    margin-bottom: 60px;
    text-align: left;
    
}
.standares{
    display: flex;
}
/*price*/
.price{
    text-align: center;

}
.priceTable{
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap; /*evita desbordamientos*/
    gap: 2.5em;
    justify-content: space-evenly;
    align-items: center;
}

.priceElement{
    background-color: #e5e5f7;
    text-align: center;
    border-radius: 10px;
    width: 330px;
    padding: 40px;
    --color-plan: #696871;
    --color-price: #223b69;
    --bg-cta: #fff;
    --color-cta: #5454d4;
    --color-items: #696871;
}
/*
.priceElement--best{ 
    width: 370px;
    padding: 60px 40px ;
    background-color: #ff7143;
    --color-plan: rgb(255 255 255 / 75%);
    --color-price: #fff;
    --bg-cta: #9f3919;
    --color-cta: #fff;
    --color-items: #fff;
}
*/
.priceName{
    color: var(--color-plan);
    margin-bottom: 15px;
    font-weight: 300;

}
.planPrice{
    font-size: 2.5rem;
    color: var(--color-price);
}
.priceItems{
    margin-top: 35px;
    display: grid;
    gap: 1em;
    font-weight: 300;
    margin-bottom: 50px;
    color: var(--color-items);
}
.priceCta{

    display: block; /*hace que ocupe todo el espacio*/
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    background-color: var(--bg-cta);
    font-weight: 600;
    color: var(--color-cta);
    box-shadow: 0 0 1px rgba(0,0, 0, .5);

}
/*Testimony*/
.testimony{
    background-color: #e5e5f7;

}
.testimonyContainer{
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    gap: 1em; /*espaciado dentro del grid*/
    align-items: center;
    padding-top: 13%;
    padding-bottom: 20%;
}
.testimonyBody{
    display: grid;
    grid-template-columns: 1fr max-content;
    justify-content: space-between;
    align-items: center;
    gap: 2em; /*espaciado dentro del grid*/
    grid-column: 2/3;
    grid-row: 1/2;
    opacity: 0;
    pointer-events: none; /*hace que el objeto no se seleccione*/
}
.testimonyBody--Show{
    pointer-events: unset;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}
.testimonyImg{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 30%;/*posiciona la imagen al centro del circulo*/
}
.testimonyTexts{
    max-width: 700px;
}
.testimonyCourse{
    background-color: royalblue;
    color: #fff;
    display: inline-block;
    padding: 5px;
}
.testimonyArrow{
    width: 90%;
    cursor: pointer;
}

/*Preguntas*/
.preguntas{
    text-align: center;
}
.preguntasContainer{
    display: grid;
    gap: 2em;
    padding-top: 50px;
    padding-bottom: 50px;
}
.preguntasPadding{
    padding: 0;
    transition: padding .3s;
    border: 1px solid #5454d4;
    border-radius: 6px;

}
.preguntasPadding--add{
    padding-bottom: 30px;
}
.preguntasAnswer{
    padding: 0 30px 0;
    overflow: hidden;   
    /*cursor: pointer;
    font-size: 20px;
    color: var(--color-title);*/


}
.preguntasTitle{
    text-align: left;
    display: flex;
    font-size: 20px;
    padding: 30px 0 30Px;
    cursor: pointer;
    color: var(--color-title);
    justify-content: space-between;
}
.preguntasArrow{
    border-radius: 50%;
    background-color: var(--color-title);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    margin-left: 10px;
    transition: transform .3s;
}
.preguntasArrow--rotate{
    transform: rotate(180deg);
}
.preguntasShow{
    text-align: left;
    height: 0;
    transition: heigth .3s;
    margin-left: 15px;
	flex-wrap: wrap;
    display: grid;
}
.normParraf{
    margin-bottom: 15px;
    
}
.preguntasImg{
    display: block;
}

.preguntasCopy{
    width: 60%;
    margin: 0 auto;
    margin-bottom: 30px;
}
.preguntaOffer{
    padding-bottom: 40px;
}
/*footer*/
.footer{
    background-color: #1d293f;
}
.footerTitle{
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 30px;

}
.footerTitle, .footerNewsLetter{
    color: #fff;

}
.footerContainer{
    display: flex;
    justify-content: space-between; /*elementos se pegan a las esquinas*/
    align-items: center;/*Elementos de centran certicalmente*/
    border-bottom: 1px solid #fff;
    padding-bottom: 60px;
}
.nav--footer{
    padding-bottom: 20px;
    display: grid;
    gap: 1em;
    grid-auto-flow: row;
    height: 100%;
}
.navLink--Footer{
    display: flex;
    margin: 0; /*quita los margeness*/
    margin-right: 20px;
    flex-wrap: wrap;

}
.footerInputs{
    margin-top: 10px;
    display: flex;
    overflow: hidden;
}
.footerInput{
    background-color: fff;
    height: 50px;
    display: block;
    padding-left: 10px;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    border: none;
    margin-right: 16px;

}
.footerSubmit{
    margin-left: auto;
    display: inline-block;
    height: 50px;
    padding: 0 20px;
    background-color: #2091f9;
    border: none;
    font-size: 1rem;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}
.footerCopy{
    --padding-containter: 30px 0;
    text-align: center;
    color: #fff;
}

.footerCopyRight{
    font-weight: 300;
}
.footerIcons{
    /*display: inline-flex; /*inline-flex los coloca los elementos horizaontal mente y flex verticalmente y si hubiera un circulo, se usa display para centrar el boton al circulo*/
    margin-bottom: 10px;
}
.footerImg{
    width: 30px;
}
/*Menu*/
.botonMenu{
    width: 200px;
    height: 30px;
    border: none;
    outline: none;
    text-decoration: none;
    color: #f7f7f7;
    /*background: #111111;*/
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #11111188;
    padding: 5px 8px 4px 5px;
}
.botonMenu::before{
    content: '';
    background: linear-gradient(45deg, #00ffd53d, #002aff4d, #7b00ff2f, #ff00c85e, #ff00003b, #ff730038, #fffb004d, #48ff006b);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}
.botonMenu:active {
    color: #2091f9
}

.botonMenu:active:after {
    background: transparent;
}

.botonMenu:hover:before {
    opacity: 1;
}

.botonMenu:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff0e;
    left: 0;
    top: 0;
    border-radius: 20px;
}
.directivo{
    padding-left: 20px;
}
.detDirectivo{
    font-style: italic;
    font-size: 12px;
    padding-left: 20px;
}
.telfEmergencia{
    margin-left: 2.8rem;
    height: 2rem;
}
.telTxt{
    color:#2091f9;
    text-shadow: 1px 1px 1px #02386b;
    padding: 0px;
    font-size: 15px;
}
.telNum{
    font-size: 28px;
}
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
/*Multimedia adapter*/
@media (max-width:800px){
    .navMenu{
        display: block;
    }
    .navLinkMenu{
        position: fixed;
        background-color: rgb(44, 60, 110);
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        
        align-items: center;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: .7s opacity;
    }
    .navLink--show{
        --show: block;
        opacity: 1;
        pointer-events: unset;
    }
    .navClose{
        position: absolute; /*ubica a la esquina superiro derecha*/
        top: 5px;
        right: 30px;
        width: 30px;
        cursor: pointer;
    }
    .heroContainer{
        padding-bottom: 320px;
        width: 100%;
        
    }
    .container{
        width: 100%;
        max-width: 1200px;
        margin: 0  auto;
        overflow: hidden;
        
    }
    .heroTitulo{
        font-size: 2rem;
    }
    #menuCsirt{
        display: inline;
        /*visibility: hidden;*/
        /*overflow: var(--show);*/
    }
    #menuCsirt1{
        display: none;
        /*visibility: hidden;*/
        /*overflow: hidden;*/
    }
    .secLeyVigente{
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 1em;
        margin-bottom: 60px;
        text-align: left;
        flex-wrap: wrap;
    }
    .iconMnu{
        width: 24px;
        height: 24px;
    }
    .heroTitle{
        font-size: 2.5rem;
    }
    .aboutMain{
        gap: 2em;

    }
    .aboutIcons:last-of-type{
        grid-column: 1/-1;
    }
    .knowledgeContainer{
        grid-template-columns: 1fr;
        grid-template-rows: max-content 1fr;
        gap: 3em;
        text-align: center;
    }
    .knowledgeImgs{
        grid-row: 1/2;
        justify-self: center;
    }
    .testimonyContainer{
        grid-template-columns: 30px 1fr 30px;
    }
    .testimonyBody{
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        gap: 3em;
        justify-items: center;

    }
    .testimonyImg{
        width: 200px;
        height: 200px;
    }
    .preguntasCopy{
        width: 100%;

    }
    .footerContainer{
        flex-wrap: wrap;
    }
    .nav--footer{
        width: 100%;
        justify-items: center;
    }
    .navLink--Footer{
        width: 100%;
        justify-content: space-evenly;
        margin: 0;

    }
    .footerForm{
        width: 100%;
        justify-content: space-evenly;
    }
    .footerInput{
        flex: 1;
    }
    .divGeneralRecurs{
        display: flex;
        justify-content: space-between;
        
    }
    .acercaDe{
        height: 0.5px;
        padding-bottom: 100px;
        
    }
}

@media(max-width:600px){
    .navMenu{
        display: block;
    }
    .heroTitle{
        font-size: 1rem;
        
    }
    .navLogo{
        text-align: center;
        
    }
    .heroParrafo{
        font-size: 1rem;
    }
    .subTitle{
        font-size: 1.8rem;
    }
    .priceElement{
        width: 90%;

    }
    .priceElement--best{
        width: 90%;
        padding: 40px;

    }
    .heroTitulo{
        font-size: 1.5rem;
    }
    #menuCsirt{
        display: inline;
        /*visibility: hidden;*/
        /*overflow: var(--show);*/
    }
    #menuCsirt1{
        display: none;
        /*visibility: hidden;*/
        /*overflow: hidden;*/
    }
    .planPrice{
        font-size: 2rem;
    }
    .testimony{
        --padding-container: 60px 0;
    }
    .testimonyContainer{
        grid-template-columns: 28px 1fr 28px;
        gap: .9em;
    }
    .testimonyArrow{
        width: 100%;

    }
    .testimonyCourse{
        margin-top: 15px;

    }
    .preguntasTitle{
        font-size: 1rem;

    }
    /*.nav--footer{
        padding: 0;
    }*/
    .footerTitle{
        justify-self: start;
        margin-bottom: 15px;
    }
    .nav--footer{
        padding-bottom: 60px;
    }
    .footerInputs{
        flex-wrap: wrap;
    }
    .footerInput{
        flex-basis: 100%;
        margin: 0;
        margin-bottom: 16px;

    }
    .footerSubmit{
        /* alternativo 
        margin-right: auto;
        margin-left: 0*/
        
        margin:0;
        width:100%;
        
    }
    .telfEmergencia{

        margin: auto;
        height: 2rem;
    }
    /*.navLink--Footer{
        justify-content: auto;
    }*/
}