html {
   font-size: 62.5%; /*esto es para usar rem 1rem = 10px*/
   box-sizing: border-box;
}

body {
   font-size: 16px; /*esto es para usar rem 1rem = 10px*/
    background-color: #f1d5ef;
    
}
*, *:before, *:after {
   box-sizing: inherit; /*Hack para box model*/
 }

 

.sombra {
   -webkit-box-shadow: 6px 11px 6px 0px rgba(194,194,194,1);
-moz-box-shadow: 6px 11px 6px 0px rgba(194,194,194,1);
box-shadow: 6px 11px 6px 0px rgba(194,194,194,1);
}
 /* Prinicipales*/


/* aqui comienza la navegacion entre paginas*/
.contenedor {
   max-width: 120rem;
   margin: 0 auto; 
}

.nav-bg {  
   background-color: /* #B198BE */ #D45BA1; 
   border-radius: 1rem;
}
 
 
 .navegacion-principal {
   display: flex;
   flex-direction: column;
}

@media (min-width: 600px) {
   .navegacion-principal { 
      flex-direction: row;
      justify-content: space-between;     
   }
      
  }

 .navegacion-principal a {
   display: block;
   text-align: center;
   color: white;
   text-decoration: none; 
   font-size: 2rem;
   font-weight: bold;
   padding: 1rem;
   font-family: "Josefin Sans", sans-serif;
   transition: .5s;
}

.navegacion-principal a:hover {
   background-color: #FFDB84;
   color: black;
   transform: scale(1.2, 1.2);
}
/*Aqui termina la navegacion*/

.inline-image {
   display: flex;
   justify-content: center;
   width: 20rem;
   height: 20rem; /* Ajusta la altura de la imagen según tus necesidades */
   margin: 3rem;
   margin-left: 10rem;
   margin-right: 0;
   border-radius: .5REM;
   transition: .5s;

}

.inline-image:hover {
   transform: scale(1.05, 1.05);
}

@media (min-width: 600px) {
   .inline-container {
      display: flex;
      text-align: center;
      justify-content: center; 
   }
}

.inline-container h1 {
   margin: 3rem; 
   margin-right: 0;
   margin-left: 10rem;
   display: flex;
   align-items: center;
   font-family: "Rubik", sans-serif;
   font-weight: 600;
   font-size: 4rem;
   background: linear-gradient(to right, #FFDB84 9%, #FFC2AA 15%, #FB929F 76%, #B198BE 86%, #729CB7 68%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;  
   text-shadow: 6px 5px 3px rgba(192,179,179,0.28);
} /*Aqui termina el encabezado*/

/* inicio banner de encabezado*/
.responsive-banner {
	margin: 3rem auto;
	width: 100%;  
	position: relative;
	height: 30rem;
	min-height: 10rem;
	max-height: 15rem;
	border-radius: 1rem;
	overflow: hidden;
	background-image: linear-gradient(to bottom right, #D45BA1, #A784E0);
}  
.container-envelope  {
   font-family: "Fira Sans", sans-serif;
   font-weight: 400;
   font-size: 1.8rem;
	padding: 35px 15px;
	color: #fff;
}  
span:after,
span:before {
	content: "";
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.1);
	width: 30rem;
	height: 30rem;
}
.circle-a:before {
	width: 50rem;
	height: 50rem;
	top: -300px; left: 52%;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
.circle-a:after {
	top: 160px;
	right: 10%;
}
.circle-b:before {
	top: 60%;
	left: -25px;
}
.circle-b:after {
	width: 150px;
	height: 150px;
	bottom: -70px;
	right: -70px;
}
/* fin banner de encabezado*/

.parrafo__titulo{
   max-width: 90rem, 100%; 
   background-color: #f3e5f7; 
   margin: 0 1rem;
   padding:  3rem;
   border-radius: .5rem;
   text-align: left;
   font-family: "Fira Sans", sans-serif;
   font-weight: 400;
   font-size: 3.5rem;
} 


@media (min-width: 360px) { 
   .parrafo {   
   text-align: justify;
   padding: 1rem;
   margin: 0 1.5rem;
  }  
}   

.parrafo {
   max-width: 90rem, 100%; 
   background-color: #f3e5f7; 
   margin: 0 1rem;
   padding:  3rem;
   border-radius: .5rem;
   font-size: 1.9rem; 
   line-height: 4rem;
   font-family: "Fira Sans", sans-serif;
   font-weight: 200;
}

/*  inicia seccion de anuncios*/

@media (min-width: 600px) {
   .dos-columnas {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 1.5rem; 
   width: 100%;
   }    
}
.entrada-blog {
   position: relative;
   background: linear-gradient(to bottom right, #D45BA1, #A784E0);
   border-radius: 1rem;
   padding: 3rem;
   margin: 1rem;
   color: white ;
   font-family: "Fira Sans", sans-serif;
}

.button-inscripcion { 
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   padding: .8rem 2rem;
   margin-top: 5rem;
   background-color: blue ;
   color: white;
   text-decoration: none;
   font-family: "Fira Sans", sans-serif;
   border-radius: 1rem;
   transition: .5s;
} 

.button-inscripcion:hover {
   transform:scale(1.05, 1.05);
   color: black;  
   background-color: yellow;
}
.texto_anun {
   text-align: center;
   line-height: 4rem; 
   font-family: "Bebas Neue", sans-serif;
   color: white;
   font-weight: 200;
   font-size: 3rem; 
   margin: 1rem;
}
.vid_1 {
   width: 100%;
   height: auto;
   border-radius: .5rem;
}

/* FONDO PRINCIPAL */

.fondo-principal{
   display: flex;
}

@media (min-width: 760px ) {
   .tres-columnas {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 6rem;    
      padding: 1rem ;
      margin-right: 10rem;
      margin-left: 10rem;
   }    
}
.colum-1 {
   display: flex; /*Esta y la siguientes tres lineas son el codigo para centrar y alinear en columna*/
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-image: url(../img/group-therapy-attenders-applauding-one-participant-meeting.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   height: 30rem;
   margin-left: 0rem;
   padding: 1rem;
   border-radius: .8rem;
}



.colum-2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-image: url(../img/participants-group-therapy-gathering-hands-unity-session-medical-center.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   padding: 1rem;
   border-radius: .8rem;   
}


.colum-3 {
   display: flex;
   flex-direction: column;
   text-align: top;
   align-items: center;
   justify-content: center;
   background-image: url(../img/homoopathie\ \(1\).jpg);
   background-repeat: no-repeat;
   background-size: cover;
   padding: 1rem;
   border-radius: .8rem;
}

.sub-img {
    background-color: #B198BE;
    text-decoration: none;
    color: black;
    font-family: "Josefin Sans", sans-serif;
    font-size: 2.5rem;
    font-weight: bolder;
    border-radius: .5rem;
    transition: .5s;
 }
  
 .hero:hover {
   background-color: #FFDB84;
   color: white;
   transform: scale(1.2, 1.2);
 }

 .text-1 {
   background-color: #f8f8f8;
   color: black;
   font-family: "Fira Sans", sans-serif;
   font-weight: 200;
   font-size: 2rem;
   line-height: 4rem;
   padding: 2rem;
   border-radius: .5rem;
   text-align: justify;
   line-height: 2.5rem;
 }
 
 /*boton de facebook*/
.icons-media {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 3rem;
}
.icon {
   background-color: #B198BE;
   border-radius: 10%;
   margin: .5rem;
   padding: .3rem;
   transition: .5seg;
}
.icon:hover {
   transform: scale(1.2, 1.2);
}

  /*boton de whatsapp*/
.whatsapp-button {
   position: fixed;
   width: 60px;
   height: 60px;
   bottom: 40px;
   right: 40px;
   background-color: #25d366;
   color: #FFF;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   box-shadow: 2px 2px 3px #999;
   z-index: 1000;
} 

.whatsapp-button img {
   width: 100%;
   height: 100%;
   border-radius: 50px;
   transition: .5s;
}

.whatsapp-button:hover {
   transform: scale(1.2, 1.2);
}

footer {    
   width: 100%;
   height: auto; /* Altura del rectángulo */
   background: linear-gradient(to bottom right, #D45BA1, #A784E0);
 }

 .footer-content {
   justify-content: center;
   align-items: left; 
   color: white;
   font-size: 1.5rem;
   font-family: "Fira Sans", sans-serif;
   font-weight: 200;
   margin-top: 3rem;
   margin-bottom: 0;
   padding: 3rem;
} 


/*taller*/
.sub-menu {
   text-align: center;
   color: black;
   font-family: "Fira Sans", sans-serif;
   font-weight: 400;
   font-size: 2.5rem;
}

.imagenes__taller {
   width: 100%;
   height: auto;
   background: linear-gradient(to bottom right, #D45BA1, #A784E0); ;
   border-radius: 2rem;
}
@media (min-width: 600px) {
   .imagenes__taller {
      display: grid;
      grid-template-columns: repeat(4, 1fr) ;
      column-gap: .1rem;
      justify-content: space-between;
      margin: 0 1rem 0 1rem;
      padding: 2rem 1rem;
      padding-left: 3rem;
   }
}

.imagen_tall {
   width: 75%;
   border-radius: 50%;
   margin: 1rem;
   justify-items: center;
}