/*
AUTOR: Marco Antonio Ramírez Alfaro | RAM ALF
URL: https://ramalf.com/
CLIENTE: PsyChological health
*/

/* RESET ---------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

*, *::before, *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

/* GENERALES ---------------------------------------------------------------------------------- */

:root{
  --letraTitulos: 'Raleway', sans-serif;
  --pesoExtraBold: 800;
  --pesoBold: 700;
  --azulTexto: #8e9ebc;
  --grisTexto: #656b6f;
  --fondoAzul: #7f8fb6;
	--fondoAzul2: #717e9e;
  --fondoBeige: #f8f5ee;
  --fondoBeige2: #fcf9f4;
  --anchoMax: 1000px;
	--tamanoH2: 52px;
	--espaciadoH2: 2px;
}

body, h1, h2, p{ font-family: var(--letraTitulos); }

/* NAVEGACION ---------------------------------------------------------------------------------- */
.menuPsy{
  width: 100%;
  height: 71px;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
	padding-bottom: 8px;
  z-index: 999;
	overflow: hidden;
}

.containerMenu{
  width: 95%;
  height: 100%;
  max-width: var(--anchoMax);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: white;
}

.titulo h1{
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: var(--pesoBold);
}

nav a{
  font-family: var(--letraTitulos);
  font-weight: var(--pesoBold);
  color: white;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 15px 6px;
  border: solid 1px rgba(255, 255, 255, 0);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  transition: all .3s ease;
}

nav a:hover{ border-color: rgba(255, 255, 255, 1); }

.redes{
  transform: translateY(5px);
}

.redesMenuSuperior{
	padding: 10px 5px 0px;
}

.redes > a{ padding: 10px 3px 0px;}

.idiomaContainer{
	display: inline-block;
	font-size: 14px;
	transform: translateY(-3px);
	font-weight: var(--pesoBold);
	letter-spacing: 2px;
}

.idioma{ color: white; }

.menuMobile{
	background-color: var(--fondoAzul2);
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all .8s ease;
}

.aparecerMenuMobile{
	opacity: 1;
	visibility: visible;
}

.containerMobile{
	display: grid;
	grid-template: auto auto auto / 100%;
	grid-gap: 20px 0px;
	width: 100%;
}

.btnMobile{
	text-decoration: none;
	background: transparent;
	border: none;
	font-family: var(--letraTitulos);
	font-weight: var(--pesoExtraBold);
	color: white;
	text-transform: uppercase;
	letter-spacing: 3px;
	cursor: pointer;
}

#btnCerrarMenu{
	width: 100%;
	padding: 20px 0px;
}

#btnAbrirMenu{
	display: none;
}

.menuMobile nav{
	display: grid;
	grid-template: auto auto auto auto / 100%;
	width: 100%;
}

.menuMobile nav a{
	text-align: center;
	padding: 20px 0px;
}

.menuMobile .redes{
	display: flex;
	justify-content: center;
	padding: 20px 0px;
}

.menuMobile .redes a{
	padding: 0px 10px;
}

/* HERO ---------------------------------------------------------------------------------- */
.heroPsy, .containerHero{ height: 100vh; width: 100%; overflow: hidden;}

.heroPsy{ background-image: url(../img/bg-hero-psychological-health.jpg); background-attachment: fixed; background-size: cover; background-position: center;}

.containerHero{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(29, 65, 137, 0.5);
}

.containerHero h2{
  font-size: 45px;
  font-weight: var(--pesoExtraBold);
  letter-spacing: 1px;
  color: white;
  text-align: center;
}

.containerHero div{
  width: 100%;
  max-width: 1050px;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.containerHero img{ width: 117px; display: block; margin-bottom: 15px; }

/* ABOUT ---------------------------------------------------------------------------------- */
.aboutPsy, .actividadPsy, .experienciaPsy, .investigacionPsy, .exitoPsy, .terapiasPsy, .problemasPsy, .contactoPsy, footer{ width: 100%; display: flex; justify-content: center; overflow: hidden;}

.aboutPsy{
  background-color: var(--fondoBeige);
  padding: 65px 0 135px;
}

.containerAbout{
  width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 150px 400px / 150px 150px / 50% 50%;
}

.tituloAbout, .tituloActividad, .tituloInvestigacion, .tituloContacto{
  grid-column: 1/3;
}

.tituloAbout h2{
  font-size: var(--tamanoH2);
	font-weight: var(--pesoExtraBold);
	letter-spacing: var(--espaciadoH2);
	color: var(--azulTexto);
	text-align: center;
	margin-top: 20px;
}

.tituloAbout h3{
  font-size: 24px;
	color: var(--grisTexto);
	text-align: center;
}

.tituloAbout h4{
  font-size: 20px;
	color: var(--azulTexto);
	text-align: center;
}

.containerLogos{
  width: 95%;
  height: 150px;
  grid-column: 1/3;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 150px 150px / 150px 150px;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.containerLogos img{
	display: inline;
	align-items: center;
	height: 150px;
}

.imgAbout, .imgActividad{
	display: flex;
	align-items: center;
}

.imgCirculo div{
  width: 298px;
  height: 298px;
}

.imgCirculo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.textoAbout, .textoActividad{
	display: flex;
	align-items: center;
}

.textoAbout p, .textoActividad p, .textoExperiencia p, .textoInvestigacion p{
	font-size: 18px;
	line-height: 1.3;
	color: var(--grisTexto);
	/*text-align: justify;*/
}

/* QUE HAGO---------------------------------------------------------------------------------- */
.actividadPsy{
	background-color: var(--fondoBeige2);
	padding: 90px 0px;
}

.containerActividad{
  width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 60px 350px / 50% 50%;
}

.tituloActividad h2, .tituloExperiencia h2, .tituloInvestigacion h2{
  font-size: var(--tamanoH2);
	font-weight: var(--pesoExtraBold);
	letter-spacing: var(--espaciadoH2);
	color: var(--azulTexto);
}

.imgActividad{
	justify-content: flex-end;
}

/* EXPERIENCIA---------------------------------------------------------------------------------- */
.experienciaPsy{
	background-color: var(--fondoBeige);
	padding: 90px 0px;
}

.containerExperiencia{
  width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 60px 370px / 50% 50%;
}

.tituloExperiencia{
  grid-column: 2/3;
}

.imgExperiencia, .textoExperiencia{
	display: flex;
	align-items: center;
}

/* INVESTIGACIÓN ---------------------------------------------------------------------------------- */
.investigacionPsy{
	background-color: var(--fondoBeige2);
	padding: 90px 0px;
}

.containerInvestigacion{
  width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 60px 350px / 50% 50%;
}

.imgInvestigacion, .textoInvestigacion{
	display: flex;
	align-items: center;
}

.imgInvestigacion{
	justify-content: flex-end;
}

/* EXITO---------------------------------------------------------------------------------- */
.exitoPsy{
	background-color: var(--fondoAzul);
  padding: 100px 0px;
	color: white;
}

.containerExito{
  width: 80%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 60px 1fr / 100%;
}

.tituloExito h2{
	font-weight: var(--pesoBold);
	text-transform: uppercase;
	letter-spacing: var(--espaciadoH2);
	font-size: 13px;
	text-align: center;
}

.carruselExito{
	width: 100%
}

.itemExito{
	/*width: 45%;
	display: flex;
	flex-direction: column;*/
	padding: 0 20px;
}

.testimonioExito{
	margin-bottom: 30px;
}

.testimonioExito p{
	font-size: 34px;
	line-height: 1.3;
}

.lineaExito{
	border: solid 1px rgba(255, 255, 255, 0.3);
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	margin: 20px 0px;
}

.nombreExito{
	font-weight: var(--pesoBold);
	letter-spacing: var(--espaciadoH2);
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 5px;
}

.profesionExito{
	font-size: 13px;
}

/* TERAPIAS ---------------------------------------------------------------------------------- */
.terapiasPsy{
	background-color: var(--fondoBeige);
  padding: 100px 0px;
}

.containerTerapias{
  width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 1fr 130px 40px / 100%;
	grid-row-gap: 40px;
}

.tituloTerapias{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tituloTerapias img{
	width: 140px;
}

.tituloTerapias h2{
  font-size: var(--tamanoH2);
	font-weight: var(--pesoExtraBold);
	letter-spacing: var(--espaciadoH2);
	color: var(--azulTexto);
	text-align: center;
	margin-top: 20px;
}

.tipoTerapias{
	display: grid;
  grid-template: 1fr / 25% 25% 25% 25%;
	grid-gap: 10px 0px;
}

.terapia, .problema{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--azulTexto);
	font-weight: var(--pesoBold);
	letter-spacing: 1px;
	font-size: 15px;
	padding: 0 5px;
}

.terapia img, .problema img{
	width: 95%;
	max-width: 55px;
	margin-bottom: 25px;
	transition: all .5s ease;
	will-change: transform;
}

.terapia:hover img, .problema:hover img{
	transform: scale(1.3);
}

.textoTerapias{
	font-size: 18px;
	color: var(--grisTexto);
	text-align: center;
	line-height: 1.2;
}

/* PROBLEMAS ---------------------------------------------------------------------------------- */
.problemasPsy{
  background-color: var(--fondoBeige2);
  padding: 100px 0px;
}

.containerProblemas{
  width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 150px 1fr 300px / 100%;
}

.tituloProblemas h2{
  font-size: 33px;
	font-weight: var(--pesoExtraBold);
	letter-spacing: var(--espaciadoH2);
	color: var(--azulTexto);
	text-align: center;
}

.tipoProblemas{
	display: grid;
	grid-template: 1fr 1fr / 20% 20% 20% 20% 20%;
	grid-gap: 100px 0px;
}

.textoProblemas{
	display: flex;
	align-items: flex-end;
	font-size: 17px;
	color: var(--grisTexto);
	line-height: 1.2;
}

/* CONTACTO ---------------------------------------------------------------------------------- */
.contactoPsy{
	background-color: var(--fondoAzul);
	padding: 100px 0;
}

.containerContacto{
	width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 70px 1fr / 50% 50%;
}

.tituloContacto{
	display: flex;
	justify-content: center;
	color: white;
	font-size: var(--tamanoH2);
	font-weight: var(--pesoExtraBold);
	letter-spacing: var(--espaciadoH2);
	text-align: center;
	text-transform: uppercase;
}

.textoContacto{
	color: rgba(255, 255, 255, 0.7);
	padding: 0 5%;
}

.direccion{
	font-size: 30px;
	line-height: 1.2;
}

.textoContacto a{
	color: rgba(255, 255, 255, 0.7);
	font-size: 30px;
	line-height: 1.2;
	display: block;
	transition: all .3s ease;
}

.textoContacto a:hover{
	color: rgba(255, 255, 255, 1);
}

.tel{
	margin: 10px 0;
}

.textoContacto h3{
	font-weight: var(--pesoBold);
	text-transform: uppercase;
	letter-spacing: var(espaciadoH2);
	font-size: 17px;
	margin: 40px 0 10px;
	color: white;
}

.infoContacto{
	font-size: 15px;
	line-height: 1.2;
}

.mapaContacto{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* FOOTER ---------------------------------------------------------------------------------- */
footer{
  background-color: var(--fondoAzul2);
  padding: 20px 0;
}

.containerFooter{
	width: 95%;
  max-width: var(--anchoMax);
  display: grid;
  grid-template: 1fr / 20% 60% 20%;
}

.logoFooter{
	display: flex;
	justify-content: center;
	align-items: center;
}

.logoFooter img{
	width: 90%;
	max-width: 60px;
	display: block;
}

.derechosFooter{
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
	font-size: 12px;
}

.containerFooter .redes{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	transform: translateY(0px);
}

.containerFooter .redes .idiomaContainer{
	transform: translateY(0px);
	padding: 10px 5px 0px
}

/*PC PEQUEÑAS --------------------------------------------------------------------------------------------*/
@media all and (max-width: 1050px){
	/* NAVEGACION ---------------------------------------------------------------------------------- */
	.titulo h1{
		font-size: 12px;
	}
	nav a{
		letter-spacing: 2px;
		padding: 10px 10px 6px;
		font-size: 10px;
	}

	/* HERO ---------------------------------------------------------------------------------- */
	.containerHero h2{
		font-size: 35px;
	}

	/* ABOUT QUE HAGO EXPERIENCIA INVESTIGACION ---------------------------------------------------------------------------------- */
	:root{
		--tamanoH2: 40px;
	}
	.tituloAbout h2{
		margin-top: 10px;
	}
	.tituloAbout h3{
		font-size: 20px;
	}
	.imgAbout, .imgActividad, .imgExperiencia, .imgInvestigacion{
		justify-content: center;
	}
	.textoAbout p, .textoActividad p, .textoExperiencia p, .textoInvestigacion p{
		font-size: 16px;
	}

	/* EXITO---------------------------------------------------------------------------------- */
	.testimonioExito p{
		font-size: 28px;
	}

	/* CONTACTO ---------------------------------------------------------------------------------- */
	.textoContacto a, .direccion{
		font-size: 17px;
	}
}

/*CELULARES --------------------------------------------------------------------------------------------*/
@media all and (max-width: 800px){
	.containerHero h2{
		font-size: 30px;
		line-height: 1.2;
	}
	#btnAbrirMenu{
		display: block;
	}
	.containerMenu nav, .containerMenu .redes{
		display: none;
	}

	/* ABOUT QUE HAGO EXPERIENCIA INVESTIGACION ---------------------------------------------------------------------------------- */
	.tituloActividad h2, .tituloExperiencia h2, .tituloInvestigacion h2{
		text-align: center;
	}
	.containerAbout, .containerActividad, .containerExperiencia, .containerInvestigacion{
		grid-template: auto auto auto / 100%;
		grid-gap: 50px 0px;
	}
	.tituloAbout, .tituloActividad, .tituloInvestigacion, .tituloContacto, .tituloExperiencia{
		grid-column: 1/2;
	}
	:root{
		--tamanoH2: 30px;
	}
	.tituloAbout h3{
		font-size: 18px;
	}
	.textoAbout p, .textoActividad p, .textoExperiencia p, .textoInvestigacion p{
		font-size: 15px;
	}
	.imgActividad, .imgInvestigacion{
		order: 2;
	}
	.textoActividad, .textoInvestigacion{
		order: 3;
	}

	/* TERAPIAS ---------------------------------------------------------------------------------- */
	.containerTerapias{
		grid-template: auto auto auto / 100%;
		grid-row-gap: 80px;
	}
	.tituloTerapias img{
		width: 120px;
	}
	.tipoTerapias{
		grid-template: 1fr 1fr / 50% 50%;
		grid-gap: 30px 0px;
	}
	.textoTerapias, .textoProblemas{
		font-size: 16px;
	}

	/* PROBLEMAS ---------------------------------------------------------------------------------- */
	.containerProblemas{
		grid-template: auto auto auto / 100%;
		grid-row-gap: 80px;
	}
	.tituloProblemas h2{
		font-size: 30px;
	}
	.tipoProblemas{
		grid-template: 1fr 1fr 1fr 1fr 1fr / 50% 50%;
		grid-gap: 20px 0;
	}

	/* CONTACTO ---------------------------------------------------------------------------------- */
	.containerContacto{
		grid-template: auto auto auto / 100%;
		grid-row-gap: 50px;
	}
	.textoContacto{
		text-align: center;
	}

	.containerFooter{
		grid-template: auto auto auto / 100%;
		grid-gap: 10px 0px;
	}
}