@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');


:root {
    
    font-size: 13px;
    
    /* Primary */
    --var-soft-blue: hsl(215, 51%, 70%);
    --var-cyan: hsl(178, 100%, 50%);
    /* Neutral */
    --var-main-darkest: hsl(217, 54%, 11%);
    --var-card-dark: hsl(216, 50%, 16%);
    --var-line-dark: hsl(215, 32%, 27%);
    --var-lightest: white;
    
    /* Fonts */
    
    --var-heading: normal normal 600 1.0em/1.3em 'Outfit', sans-serif;
    
    --var-small-heading: normal normal 400 1em/1em 'Outfit', sans-serif;
    --var-small-h3-heading: normal normal 400 0.8em/1em 'Outfit', sans-serif;

    --var-para: normal normal 300 0.8em/1.0em 'Outfit', sans-serif;
    --var-para-payment: normal normal 300 0.9em/1.0em 'Outfit', sans-serif;
    --var-span-payment: normal normal 500 1.0em/1.0em 'Outfit', sans-serif;

    --var-heading-bs: normal normal 600 0.8em/1.1em 'Outfit', sans-serif;
    --var-small-heading-bs: normal normal 400 0.8em/0.8em 'Outfit', sans-serif;
    --var-para-bs: normal normal 300 0.8em/0.8em 'Outfit', sans-serif;
}

.card-enfoque {
    width: 100%;
    max-width: 320px;
    margin: 2em auto;
    background-color: var(--var-card-dark);
    border-radius: 15px;
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
/*    padding: 2rem;*/
}


.grid-img-container{
    display: grid;
    width: 100%;
    margin: auto;
  }

  .grid-img-container img{
    width: 100%;
  }

  .grid-img-container img:nth-child(1){
    grid-area: 1 / 1;
    height: 220px;
  }

  .grid-img-container img:nth-child(2){
    width: 6em !important;
    height: 6em;
    border-radius: 50%;
    outline: 5px solid #7B7BBD;
    grid-area: 1 / 1;
    margin-top: 10px;
    margin-left: 10px;
  }

.card-enfoque .body{
	padding: 2rem;
}

.card-enfoque img{
    width: 100%;
    
}


.card-enfoque h1 {
    font: var(--var-heading);
    color: var(--var-lightest);
    padding: 0.5em 0;
}


.card-enfoque p{
	font: var(--var-para);
   color: var(--var-soft-blue);
   text-align: center !important;
   margin: 0px 5px;
}

.card-enfoque a {
    color: inherit;
}

.card-enfoque h2 {
    font: var(--var-small-heading);
    color: var(--var-lightest);
    margin-bottom: 0px;
    text-align: center;

    /* padding on .coin-base */
}

.card-enfoque h3 {
    font: var(--var-small-h3-heading);
    color: var(--var-lightest);
    margin-bottom: 0px;
    text-align: center;

    /* padding on .coin-base */
}

.card-enfoque main{
	background-color: white !important;
}

.card-enfoque .card-attribute {
    padding-bottom: 0.5em;
    border-top: 2px solid var(--var-line-dark);
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

.card-enfoque .card-attribute img{
    max-width: 3em;
}



.small-avatar {
    width: 2em;
    height: 3em;
    border-radius: 50%;
    outline: 2px solid white;
    margin-right: 1.4em;
}



@media (min-width:600px) {
    body {
        font-size: 18px;
    }

    
}

@media only screen and (max-width: 600px) {
  .card-enfoque p{
    	font-size: 15px !important;
    }
}


/********************************WHITE**************************/

.card-enfoque-wh{
    width: 100%;
    max-width: 320px;
    margin: 1em auto;
    background-color: #eee;
    border-radius: 15px;
    margin-bottom: 1rem;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.card-enfoque-wh .body{
    padding: 2rem;
}

.card-enfoque-wh img{
    width: 100%;
    
}

.card-enfoque-wh .card-header{
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: inherit;
    padding: 0px !important;
}


.card-enfoque-wh h1 {
    text-align: center;
    font: var(--var-heading);
    color: white;
    padding: 1.5rem 2rem;
    background-image: linear-gradient(310deg, #7B7BBD 0%, #595959 100%);
    width: 100%;
    height: 100%;
    margin: 0px !important;
}


.card-enfoque-wh p{
    font: var(--var-para);
   color: #595959;
   text-align: center !important;
   margin: 0px 5px;
}


.card-enfoque-wh .card-desc p{
    text-align: inherit !important;
    background-color: inherit !important;
    text-align: justify !important;
    font: var(--var-para) !important;
}


.card-enfoque-wh .card-desc span{
    text-align: inherit !important;
    background-color: inherit !important;
    font: var(--var-para) !important;
}

.card-enfoque-wh a {
    color: inherit;
}

.card-enfoque-wh h2 {
    font: var(--var-small-heading);
    color: black;
    margin-bottom: 0px;
    text-align: center;

    /* padding on .coin-base */
}

.card-enfoque-wh h3 {
    font: var(--var-small-h3-heading);
    color: black;
    margin-bottom: 0px;
    text-align: center;

    /* padding on .coin-base */
}

.card-enfoque-wh main{
    background-color: white !important;
}

.card-enfoque-wh .card-attribute {
    padding-bottom: 0.5em;
    border-top: 2px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

.card-enfoque-wh .card-attribute img{
    max-width: 3em;
}

.p-justify{
    text-align: justify !important;
}


/****************************************PAYMENT**************************************/
.card-enfoque-payment{
    width: 100%;
    margin: 1em auto;
    background-color: #F9F9F9;
    border-radius: 10px;
    margin-bottom: 1rem;
/*    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;*/
}

.card-enfoque-payment .body{
    padding: 0.5rem 2rem;
}

.card-enfoque-payment img{
    width: 100%;
    
}

.card-enfoque-payment .card-header{
    
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: inherit;
    padding: 0px !important;
}

.card-enfoque-payment h1 {
    
    text-align: center;
    font: var(--var-heading);
    color: white;
    padding: 1.5rem 2rem;
/*    background-image: linear-gradient(to right top, #4c0c30, #4d1338, #4d1a41, #4d2148, #4c2750, #452b54, #3e2f58, #36335a, #293457, #1e3553, #15354d, #123446);*/
    background-image: linear-gradient(310deg, #7B7BBD 0%, #595959 100%);
    width: 50%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 2rem;
}

.card-enfoque-payment hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0 !important;
  border-top: 1px solid #595959 !important;
  width: 30%;
  opacity: 0.25;
}

.card-enfoque-payment .card-desc p{
    text-align: inherit !important;
    background-color: inherit !important;
    text-align: justify !important;
    font: var(--var-para-payment) !important;
}


.card-enfoque-payment .card-desc span{
    text-align: inherit !important;
    background-color: inherit !important;
    font: var(--var-para-payment) !important;
}


.card-enfoque-payment p{
    font: var(--var-para-payment);
   color: #595959;
   text-align: center !important;
   margin: 0px 5px;
   line-height: 1.3;
}

.card-enfoque-payment span{
    font: var(--var-span-payment);
    color: #3B3A3A;
   text-align: center !important;

}

.card-enfoque-payment .nombre-mentor{
    width: 100% !important;
}

.card-enfoque-payment .bio-foto{
   width: 300px;
    height: 300px;
/*    border-radius: 10% 30% 50% 70%;*/
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    border-bottom: solid 10px #3B364C;

}



.card-enfoque-payment-detail{
    font: var(--var-para-payment);
   color: #595959;
   text-align: left !important;
   margin: 0px 5px;
}

.card-enfoque-payment a {
    color: inherit;
}

.card-enfoque-payment h2 {
    font: var(--var-small-heading);
    color: black;
    margin-bottom: 0px;
    text-align: center;

    /* padding on .coin-base */
}

.card-enfoque-payment h3 {
    font: var(--var-small-h3-heading);
    color: black;
    margin-bottom: 0px;
    text-align: center;

    /* padding on .coin-base */
}

.card-enfoque-payment main{
    background-color: white !important;
}

.card-enfoque-payment .card-attribute {
    padding-bottom: 0.5em;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

.card-enfoque-payment .card-attribute img{
    max-width: 3em;
}

.p-justify{
    text-align: justify !important;
}


@media only screen and (max-width: 600px) {
    .card-enfoque-payment{
        font-size: 16px !important;
    }

    .card-enfoque-payment h1 { 
        width: 100%;
    }

    .card-enfoque-payment .bio-foto{
        width: 60%;
    }

}



/*************************************  BUSCADOR  **************************************/
/*************************************  BUSCADOR  **************************************/
/*************************************  BUSCADOR  **************************************/
.card-enfoque-buscador{
    width: 100%;
    margin: 1em auto;
    background-color: #F9F9F9;
    border-radius: 10px;
    margin-bottom: 1rem;
/*    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;*/
}

.card-enfoque-buscador .body{
    padding: 0.5rem 2rem;
}

.card-enfoque-buscador img{
    width: 100%;
}

.card-enfoque-buscador h1 {
    font: var(--var-heading-bs);
    color: black;
    margin-top: 1 rem;
    padding: 1rem 2rem;
}

.card-enfoque-buscador .card-desc p{
    text-align: inherit !important;
    background-color: inherit !important;
    text-align: justify !important;
    font: var(--var-para-bs) !important;
}


.card-enfoque-buscador .card-desc span{
    text-align: inherit !important;
    background-color: inherit !important;
    font: var(--var-para-bs) !important;
}

.card-enfoque-buscador p{
    font: var(--var-para-bs);
   color: #595959;
   text-align: center !important;
   margin: 0px 5px;
}

.card-enfoque-buscador-detail{
    font: var(--var-para-payment);
   color: #595959;
   text-align: left !important;
   margin: 0px 5px;
}

.card-enfoque-buscador a {
    color: inherit;
}

.card-enfoque-buscador h2 {
    font: var(--var-small-heading-bs);
    color: black;
    margin-bottom: 0px;
    text-align: center;
}

.card-enfoque-buscador h3 {
    font: var(--var-small-h3-heading);
    color: black;
    margin-bottom: 0px;
    text-align: center;
}

.card-enfoque-buscador main{
    background-color: white !important;
}

.card-enfoque-buscador .card-attribute {
    padding-bottom: 0.5em;
    border-top: 2px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0.5em 0;
}

.card-enfoque-buscador .card-attribute img{
    max-width: 3em;
}


.dot-buscador {
    height: 30px;
    width: 30px;
    background-color: #992A77;
    border-radius: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 600px) {
  .card-enfoque-buscador{
        font-size: 15px !important;
    }
}