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

:root{
  --padding-container:50px 0;
  --color-title:#001A49;
}

body{
    font-family: 'Poppins',sans-serif;
  }

  
.btn-wsp{
    position:fixed;
    width:60px;
    height:60px;
    line-height: 63px;
    bottom:25px;
    right:25px;
    background:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:35px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
}
.btn-wsp:hover{
    background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
    .btn-wsp{
        width:63px;
        height:63px;
        line-height: 66px;
	}
}


.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: var(--padding-container);

  }

  .subtitle{
    padding-top: 50px;
  }


  .hero{
    width: 100%;
    /* height: 100vh;
    min-height: 600px; */
    max-height: 800px;
    position: relative;
    display: grid;
    grid-template-rows: 100px 1fr;
    color: white;
  }

  .hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #0000008c 0%, #0000008c 100%), url(../IMG/sobre_nosotros.jpg);
    background-size: cover;
    /* clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 80%, 80% 90%, 50% 100%, 20% 90%, 0 80%, 0% 35%, 0 0); */
    z-index: -1;
  }
  .hero_container{
    max-width: 800px;
    --pading-container:0;
    display: grid;
    grid-auto-rows: max-content ;
    align-content: center;
    gap: 1em;
    padding-bottom: 100px;
    text-align: center;
  }

  .hero_title{
    font-size: 3rem;
    
  }
  .hero_paragraph{
    font-size: 20px;

    color: #fff; /* Color del texto */

 /
  }



  /* NAV */
  .nav{
    --padding-container:0;
    height: 100%;
    display: flex;
    align-items: center;
  }


  .nav_title{
    font-weight: 300;
  }

  .nav_items{
    list-style: none;
  }



  .nav_link,.nav_links2{
    margin-left: auto;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 2em;
  }

  .nav_links{
    color :white;
    text-decoration: none;
  }
  .nav_links2{
    color: black;
    text-decoration: none;
  }


  .nav_menu{
    margin-left: auto;
    cursor: pointer;
    display: none;
  }


  .nav_img{
    display: block;
    width: 30px;
  }



  .nav_close{
    display: var(--show, none);
  }
/* SERVICIOS */
.card{
    background-image: url(../IMG/Fondo_Adultos.jpeg);
  }
  .card2{
    background-image: url(../IMG/Terapia\ de\ Pareja.jpeg);
  }
  .card3{
    background-image: url(../IMG/ninos.jpeg);
  }
  .card4{
    background-image: url(../IMG/Certificado\ de\ Salud\ Mental.jpeg);
  }
  
  
  .card, .card2 ,.card3,.card4 {
    font-size: 18px;
    color: white;
    background-size: cover;
    padding: 10rem 0 0 ;
    max-width: 50ch;
    border-radius: 0.5rem;
    overflow: hidden;
  
  transition: transform 500ms ease;
  }

  
.card:hover,
.card:focus-within,
.card2:hover,
.card2:focus-within,
.card3:hover,
.card3:focus-within,
.card4:hover,
.card4:focus-within{
  transform: scale(1.05);
}

.card_content{
  --padding: 1.5rem;
  padding: var(--padding);
  background: linear-gradient(
    hsl(0 0% 0% / 0),
    hsl(20 0% 0% / 0.3)20%,
    hsl(0 0% 0% / 1)
  );
  transform: translateY(70%);
  transition: transform 500ms ease;

}

.card:hover .card_content,
.card:focus-within .card-content,
.card2:hover .card_content,
.card2:focus-within .card-content,
.card3:hover .card_content,
.card3:focus-within .card-content,
.card4:hover .card_content,
.card4:focus-within .card-content{
  transform: translateY(0);

}


.card-content > *:not(.card_title){

    opacity: 0;
    transition:  transform 500ms linear;
  
  }
  
  .card:hover .card-content > *:not(.card_title),
  .card2:hover .card-content > *:not(.card_title),
  .card3:hover .card-content > *:not(.card_title),
  .card4:hover .card-content > *:not(.card_title)
  {
    opacity: 1;
  }
  
.card_title{

    position: relative;
    width: max-content;
   
  }
  
  .card_title::after {
    content: "";
    position: absolute;
    height: 4px;
    left: calc(var(--padding) * -1);
    bottom: -2px;
    width:  calc(100% + var(--padding));
    background: palevioletred;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms ease;
  
  }
  
  .card:hover .card_title::after,
  .card2:hover .card_title::after,
  .card3:hover .card_title::after,
  .card4:hover .card_title::after
  {
    transform: scaleX(1);
  }

  
.card-body{

    color: rgb(255 255 255 / 0.9);
  
  }
  
  .button{
    font-size: 15px;
    cursor: pointer;
  display: inline-block;
  text-decoration: none;
  color: black;
  background-color: palevioletred;
  padding: 0.5em;
  border-radius: 0.25em;
  
  }

  
.button:hover,
.button:focus{
  background-color: white;
}


.about{
    text-align: center;
  }
  .subtitle{
    color: var(--color-title);
    font-size: 2rem;
    margin-bottom: 25px;
  }

  .about_paragraph{
    line-height: 1.7;
  }

  .about_main{
    padding-top: 80px;
    padding-bottom: 80px;
    display: grid;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    gap: 2em;
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(400px,auto));
    justify-items: center;
  }

  
  .more_content{
    display: flex;
    justify-content: center;
  }

  .info{
    margin-top: 40px;
  }

.about_icons{
   
    gap: 1em;
    justify-items: center;
    width: 260px;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
  }
  .about_icon{
    width: 40px;
  }  

  /* TESTIMONY */

  .equipo{
    padding-top: 70px;
    display: flex;
    justify-content: center;
  }
  
    .testimony{
      background-color: #e5e5f7;
  
    }
  
  .testimony_container{
    display: grid;
    grid-template-columns: 50px 1fr 50px ;
  gap: 1em;
  padding-top: 50px;
  padding-bottom: 50px;
  
  }
  
  .testimony_body{
    display: grid;
    grid-template-columns: 1fr max-content;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    grid-column: 2/3;
    grid-row: 1/2;
    opacity: 0;
    pointer-events: none;
  }
  
  .testimony_body--show{
    pointer-events: unset;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
  }
  .testimony_img{
    width: 250px;
    height: 250px;
    border-radius: 5%;
    object-fit: cover;
    object-position: 50% 30%;
  }
  
  .testimony_text{
    max-width: 700px;
  }
  
  .testimony_course{
    background-color: royalblue;
    color: #fff;
    display: inline-block;
    padding: 5px;
  }
  .testimony_arrow{
    width: 90%;
    cursor: pointer;
  }
  



  @media(max-width:800px){
    .nav_menu{
      display: block;
    }
  
    .nav_link--menu{
      position: fixed;
      background-color: #000;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: .7s opacity;
    }
    .nav_link--show{
      --show: block;
      opacity: 1;
      pointer-events: unset;
    }
  
    .nav_close{
      position: absolute;
      top: 30px;
      right: 30px;
      width: 30px;
      cursor: pointer;
    }
  }


  /* Price */


  .price{
    text-align: center;

  }

  .price_table{

    padding-bottom: 60px;
    padding-top: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5em;
    justify-content: space-evenly;
    align-items: center;
  }

  .price_element{
    background-color: #e5e5f7;
    text-align: center;
    border-radius: 10px;
    width: 330px;
    padding: 40px;
    --color-plan: #696871;
    --color-price: #1D293F;
    --bg-cta: #fff;
    --color-cta:#5454D4;
    --color-items: #696871;

  }

  .price_element--best{
    width: 370px;
    padding: 60px 40px;

    background-color: rgb(240, 128, 128);
    --color-plan: rgb(255 255 255 / 75%);
    --color-price: #fff;
    --bg-cta: rgb(205, 92, 92);
    --color-cta:#fff;
    --color-items: #fff;
  }

  .price_name{
    color: var(--color-plan);
    margin-bottom: 15px;
    font-weight: 300;
    font-size: 30px;
  }

  .price_price{
    font-size: 2.5rem;
    color: var(--color-price);
  }

  .price_items{
    margin-top: 35px;
    display: grid;
    gap: 1em;
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 50px;
  }

  .price_cta{
    color: var(--color-cta);
    background-color: var(--bg-cta);
    display: block;
    padding: 20px 0;
    border-radius: 10px;
    text-decoration: none;
    background-color: var(--bg-cta);
    font-weight: 600;
    box-shadow: 0 0 1px rgba(0, 0, 0, .5);
  }

  /* footer */

  
.footer{
  background-color: #007A86;
  padding-top: 100px;
}

.footer_title{
  font-weight: 300;
  font-size: 2rem;
  margin-bottom: 30px;
}

.footer_title, .footer_newsletter{
  color: #fff;
}

.footer_container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 60px;
}

.nav--footer{
  padding-bottom: 20px;
  display: grid;
  gap: 1em;
  grid-auto-flow: row;
  height: 100%;
}


.nav_links_footer{
  color: rgb(255, 255, 255);
  text-decoration: none;
}

.nav_link--footer{
  display: flex;
  margin: 0;
  margin-right: 20px;
  flex-wrap: wrap;
}

.footer_copy{
  --padding-container: 30px 0 30px;
  text-align: center;
  color: #fff;

}

.footer_copyrigth{
  font-weight: 300;
}

.footer_icons{
  display: inline-flex;
  
}

.footer_img{
  width: 30px;
}

.footer_ubicacion{
  color: white;
  align-items: center;
}
.footer_ubi{
  align-items: center;
  padding-bottom: 20px;
}

/* mobiles */

@media(max-width:800px){


  /* hero */

  
  .hero::before{
    background-image: linear-gradient(180deg, #0000008c 0%, #0000008c 100%), url(../IMG/sobre_nosotros\ -\ Copy.jpg);

  }
  /* nav */
  .nav_menu{
    display: block;
  }

  .nav_link--menu{
    position: fixed;
    background-color: #000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: .7s opacity;
  }
  .nav{
    padding-right: 10px;
  }
  .nav_link--show{
    --show: block;
    opacity: 1;
    pointer-events: unset;
  }

  .nav_close{
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    cursor: pointer;
  }

  .about_paragraph{
    padding-right: 20px;
    padding-left: 20px;
  }

  /* testimony */
  .testimony_container{
    grid-template-columns: 28px 1fr 28px;
    gap: 0.9em;
      }
    
      
      .testimony_body{
        grid-template-columns: 1fr;
        grid-template-rows: max-content;
        gap: 3em;
        justify-items: center;
    
      }
    
      .testimony_arrow{
        width: 100%;
      } 
    
      .container{
        width: 100%;
      }
    
      /* Card */
      .card_content{
        --padding: 1.5rem;
        padding: var(--padding);
        background: linear-gradient(
          hsl(0 0% 0% / 0),
          hsl(20 0% 0% / 0.3)20%,
          hsl(0 0% 0% / 1)
        );
        transform: translateY(0%);
        transition: transform 500ms ease;
      
      }

      .card_body{
        margin-bottom: 20px;
      }

      .card_title{

        font-size: 1.17rem;
      }

      .price{
        padding-top: 0;
      }

      .card,.card2,.card3,.card4{
        width: 385px;
      }


      /* footer */
      .footer_title{
        margin-right: 20px;
        margin-left: 20px;
      }

      .footer_container{
        padding-top: 20;
      }

      .nav_link--footer{
        margin-left: 20px;
      }

      .footer{
        padding-top: 0;
      }
}