@charset "UTF-8";
/* CSS Document */

:root {
  --dark: #090909;
  --secondary: #051B39
  ;
   --secondaryhover: #030B16;
  --white:#FCFCFC;
    --primary:#4481EB;
    --primaryhover:#2356B0;
  --primary10:#ECF2FD;
  --blue:#222B45;

  --small:14px;
}

html {
  scroll-behavior: smooth;
}

body{
font-family: "Poppins", sans-serif;
font-optical-sizing: auto;
font-size:16px;
line-height: 24px;     
font-weight: 300;
font-style: normal;
color:var(--dark);
background-color: #F6F8F8;
}

.display{
font-size:48px;
line-height: 60px;     
font-weight: 800;
font-style: normal;
}


h1{
    font-size:28px;
    line-height: 40px;
    font-weight: 700;
    margin-bottom:25px;
   
}

h2{
    font-size:20px;
    line-height: 1.3em;
    font-weight: 400;
   
}

h3{
    font-size:20px;
    line-height: 26px;
    font-weight: 700;
}

h4{
    font-size:16px;
    line-height: 1.3em;
    font-weight: 700;
}
b{
  font-size:16px;
    font-weight: 700;
}

strong{    font-weight: 700;
}

p.small{    font-size:var(--small); font-weight:300;line-height:1.45em;
}

@media (min-width: 1200px) {
.display{
font-size:60px;
line-height: 48px;     
}

h1{
    font-size:36px;
     line-height: 1.3em;
    font-weight: 800;
   
}
}


section{
padding: 0px 20px;    
    
}

* {
  transition: all 0.3s ease-out;
}

a{
	color:inherit;
	text-decoration: none;
font-weight: 700;
line-height: 24px;
}

a:hover, a:focus a:active{
	color:inherit;
	text-decoration: none;

}

button.primary{
display: inline-block;
padding: 18px 28px 18px 28px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
background: var(--primary);
color:var(--white);cursor:pointer;
border:0px;
}
button.primary:hover{
background-color: var(--primaryhover);
color:var(--white);
cursor:pointer;
}


a.primary{
display: inline-block;
padding: 18px 28px 18px 28px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
background: var(--primary);
color:var(--white);cursor:pointer;
}

a.primary:hover{
background-color: var(--primaryhover);
color:var(--white);
cursor:pointer;
}

a.secondary{
display: inline-block;
padding: 18px 28px 18px 28px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border:#CBD5E1 1px solid;cursor:pointer;
}

a.secondary:hover{
background: var(--primary10);
border:var(--primary10) 1px solid;
}

a.darkblue{
display: inline-block;
padding: 18px 28px 18px 28px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
background-color:#051B39;
cursor: pointer;
}

a.darkblue:hover{
background-color:var(--secondaryhover);
}


  


/*NAV*/

nav{
background-color:#ffffff !important;
border-bottom:solid 1px #E2E8F0;
}

nav .nav-item a{
font-size:14px;
font-weight: 400;
border-bottom:2px #ffffff solid;
}

.nav-logo{
margin-right:65px;
}

nav .nav-item a:hover{
border-bottom:2px var(--primaryhover) solid;
}

@media (min-width: 1200px) {
  .container-xl{
max-width: 1340px;
}

.navbar-nav{
gap:15px
}
}


/*///BANNER//*/

#top{
  overflow: hidden;
}


.banner{
  padding:120px 0 0px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position:10% 40%;
  background-color: #ffffff;
  overflow: hidden;
}

.break{
   margin-top:0px;
}

.banner img.intertext{
  padding-bottom:50px;
  position: static;
    width: 120vw;
    margin: 0 auto;
    margin-left: 50%;
    transform: translate(-50%, 0%);
}

.banner .btns{
  display:flex;
  flex-direction:column;
  gap:25px;
  padding:35px 0px;
 
}

.banner .btns a{
text-align:center;
}


@media (min-width: 1200px) {
.banner{
    padding:160px 0 0px;
  background-size: auto 100%;
  background-position: 80%;
}

.banner h2{
margin-bottom:0px;
}

.banner .btns{
  flex-direction:row;
  padding:35px 0px 50px;

}

.banner .btns a{
text-align:left;
}

.break{
  margin-top:30px;
}
}



/*///HIGHTLIGHTS//*/
#highlights{
background-color: var(--secondary);
color:var(--white);
padding: 60px 20px 60px 20px;
}

#highlights .cards{
display:flex;
gap:25px;
flex-direction:column;
}

#highlights .cards img{
margin-bottom:18px;
}


#highlights .card{
background-color: rgba(255, 255, 255, 0.1) !important;
border: rgba(226,232,240, .2) solid 1px!important;
padding:35px;
width:100%;
} 

@media (min-width: 1200px) {
#highlights .cards{
flex-direction:row;
}
}


/*///QUE ES HIPNOTERAPIA//*/
#hipnoterapia{
padding: 60px 20px 0px 0px;
background-color: #ffffff;
}

@media (min-width: 1200px) {

  #hipnoterapia{
background-image:url("../imgs/rafaelbeltran_hipnoterapia.png");
  background-repeat: no-repeat;
  background-size: 70% auto;
    background-position:110% 100%;
padding: 120px;
}
}

/*///COMO FUNCIONA//*/
#como-funciona{
background-color:#ECF2FD;
padding:60px 20px 40px;
}

#como-funciona .cards{
display: flex;
flex-direction: column;
gap:25px;
padding-bottom:50px;
padding-top:30px;
}


#como-funciona .card-paso{
text-align: center;
}

#como-funciona .number{
color:rgba(68,129, 235, .2);
font-size: 48px;
font-weight:900;
}

#como-funciona .content{
background-color:#F6F8F8;
border-radius: 12px;
padding:25px;
text-align: center;
position: relative;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
}

#como-funciona .content p{
font-size: var(--small);
margin-bottom:5px;
}



@media (min-width: 1200px) {
#como-funciona .cards{
flex-direction: row;

}
}


/*///RAFAEL//*/

#rafael{
padding:60px 20px 100px;
}
#rafael img{
border-radius: 35px;
}

#rafael .graficos{
padding:0 0 0 30px;
}

.expertise{
font-size:28px;
font-weight: 800;;
padding:30px 20px 20px 20px;
background-color: var(--primary);
color:var(--primary10);
border-radius: 12px;
display: inline-block;
position: absolute;
margin-top: -50px;
margin-left: 50%;
text-align: center;
transform: translate(-50%, 0%);
}


@media (min-width: 1200px) {

#rafael{
padding:60px 20px 40px;
}

.expertise{
margin-top: -200px;
margin-left: 0px;
text-align: center;
}
}




/*///MITOS//*/

#mitos{
padding:60px 20px 60px 20px;
background-color: var(--blue);
color:var(--white);
}

#mitos h1{
margin-bottom:0px;
}

#mitos p{
margin-bottom:0px;
}

#mitos .cards{
display:flex;
gap:25px;
font-size: 14px;
padding:65px 0;
display: grid;
grid-template-columns: repeat(1, 1fr);
}

#mitos b{
color: #F87171;
} 

#mitos .card{
background-color: rgba(255, 255, 255, 0.1) !important;
border-left: #EF4444 solid 4px!important;
padding:25px;
border-radius: 12px;
} 



@media (min-width: 1200px) {
#mitos .cards{
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}


/*///RESERVAR//*/

#reservar{
padding:60px 20px 60px 20px;
}



#reservar .number{
font-size:20px;
color:var(--primary);
font-weight: 700;
margin-right:20px;
}


#reservar form{
font-family: inherit;
}


#reservar input, #reservar textarea{
width:100%;
padding:10px;
border:#d5d5d5 solid 1px;
border-radius: 10px;
font-weight:300;
}


/*///TESTIMONIOS//*/

#testimonios{
padding:60px 20px 60px 20px;
}



#testimonios p{
margin-bottom:0px;
}

#testimonios .cards{
display:flex;
gap:25px;
font-size: 14px;
padding:15px 0 65px;
display: grid;
grid-template-columns: repeat(1, 1fr);
}


#testimonios .card{
background-color:var(--primary10);
border:none;
border-left: #4481EB solid 4px!important;
padding:25px 25px 15px 25px;
border-radius: 12px;
} 

#testimonios p{
margin-bottom:10px;
} 

#testimonios b{
font-size:14px;
} 



@media (min-width: 1200px) {
#testimonios .cards{
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}



/*///BANNER LISTO//*/

#banner-listo{
padding:120px 20px 100px 20px;
background: linear-gradient(180deg, #4481EB 0%, #234B92 100%);
color:var(--white);
}

#mitos h1{
margin-bottom:0px;
}






/*FAQS*/

#faqs{
padding:0 0 80px 0;

}

 .accordion-button::after {
      display: none; /* quitamos el ícono default */
    }

    .icon {
      transition: transform 0.3s ease;
    }

    .accordion-button:not(.collapsed) .icon {
      transform: rotate(180deg); /* gira cuando está abierto */
    }

    .accordion-item{
margin:10px 0px;
border-radius: 12px;
      padding:25px;
      background-color:#FFFFFF;
      stroke:#a9b8cc solid 1px;
    }

   .accordion-item h2.accordion-header button{
font-size:15px;
font-weight: 700;

    }


      .accordion-item button{
border: none !important;
background:none;
width:100%;
    }


   .accordion-item button .icon {
    background-color: none;
  font-size:14px;
}

.accordion-body{
text-align:left;
font-size:14px;
    }


 /*FOOTER*/

footer{
  padding:55px 0 0 0;
    }  
    
    footer .rrss{
display:flex;
gap:20px;
width: fit-content;
margin:0 auto;

    }

    .icon-facebook{
height:35px;
      width:35px;
      background-image: url("../imgs/icons/facebook-icon.svg");
      margin:0 auto;
      display: inline-block;
    }

    .icon-facebook:hover{
      background-image: url("../imgs/icons/facebook-icon-hover.svg");
      cursor: pointer;

    }

       .icon-instagram{
height:35px;
      width:35px;
      background-image: url("../imgs/icons/instagram-icon.svg");
       margin:0 auto;
         display: inline-block;
    }

    .icon-instagram:hover{
height:35px;
      width:35px;
      background-image: url("../imgs/icons/instagram-icon-hover.svg");
       margin:0 auto;
         display: inline-block;   cursor: pointer;
    }