/*
	*Main CSS para implementacion directa de sitios.
	
	*La adaptacion del bolierplate y este codigo son esfuerzo del eqipo de ID.A libre
	*con agradecimientos especiales a Juan Palma encargado de la implementacion.
*/

/* ==========================================================================
	Parametros Globales
========================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); */
/* font-family: 'Sen', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;400;700;900&display=swap'); */
/* font-family: 'League Spartan', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,600;1,100;1,300;1,400;1,600&display=swap'); */
/* font-family: 'Barlow Condensed', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,700;1,300;1,700&display=swap'); */
/* font-family: 'Cormorant Garamond', serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,900;1,700&display=swap');


html, body{
	scroll-behavior: smooth;
}

:root{
	--colorBackDark: #1a1918;
	--colorBackColor: #2c2a29;
	--colorPrincipal: #e26c2e;
	--colorSecundario: #ffd5c5;
	--colorTexto: var(--colorBackColor);
	--margenGlobal: 6vw;
	--anchoContainer: calc(100vw - (var(--margenGlobal) * 2));
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Montserrat', serif;
	font-weight: 900;
}
body, button, input, select, textarea, ::after, ::before{
	font-family: 'Alegreya', sans-serif;
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: 0.05em;
	color: var(--colorTexto);
}
nav, main, footer {
	display: block;
	width: 100%;
}
i::before{
	font-family: inherit;
	font-weight: inherit;
}
.container{
	width: var(--anchoContainer);
}
.anchoFull{
	width: 100vw;
	position: relative;
	margin-left: calc(var(--margenGlobal) * -1);
}
.anchoFullFlex{
	width: 100vw;
	position: relative;
}

.contenedorG{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}
.contenedorC{
	width: var(--anchoContainer);
	max-width: calc(960px - (var(--margenGlobal) * 2));
	display: flex;
}
.margen1{
	margin-left: var(--margenGlobal);
}
.padding1{
	padding-left: var(--margenGlobal);
}
.fondo{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
	
@-ms-viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
}

@viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
}


/* ==========================================================================
	Estilos visiales para elementos GENERALES
========================================================================== */
.desaparece{
	display: none !important;
	visibility: hidden !important;
	width: 1px !important;
	height: 1px !important;
	position: absolute !important;
	overflow: hidden !important;
	opacity: 0 !important;
	clip: rect(1px 1px 1px 1px) !important;
	
}
.ocultar{
	display: none !important;
}
.opacidad0{
	opacity: 0 !important;
}
.opacidad1{
	opacity: 1 !important;
}
.animar{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.animar1-4{
	-webkit-transition: all 1.4s ease-in-out;
	-moz-transition: all 1.4s ease-in-out;
	-o-transition: all 1.4s ease-in-out;
	-ms-transition: all 1.4s ease-in-out;
	transition: all 1.4s ease-in-out;
}
.colorPrincipal{
	color: var(--colorPrincipal) !important;
}
.colorBackColor{
	color: var(--colorBackColor) !important;
}
p {
	margin-bottom: 1.4em;
}
p:last-of-type {
	margin-bottom: 0;
}







/* ==========================================================================
	Estilos visiales de la ventana pop de avisos
========================================================================== */
div#ventanaPOP {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(0 0 0 / 84%);
	z-index: 99999999;
	transition: all 200ms ease-in-out;
}
	#ventanaPOP .ventanaCerrar {
		width: 28px;
		height: 28px;
		position: absolute;
		top: 18px;
		left: auto;
		right: 18px;
		background: darkred;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		line-height: 0;
		border-radius: 4px;
		padding-bottom: 2px;
		cursor: pointer;
		font-weight: 900;
		transition: all 200ms ease-in-out;
	}
	#ventanaPOP .ventanaCerrar:hover{
		background-color: orangered;
	}
	#ventanaPOP .mensajeBox {
		max-width: 86%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3em;
		background: #fff;
		border: 8px solid #555;
		border-radius: 30px;
		font-size: 120%;
		transition: all 200ms ease-in-out;
	}
		#ventanaPOP button {
			appearance: none;
			padding: 6px 24px;
			margin: 24px 0 0;
			border: 0;
			border-radius: 6px;
			background-color: #444;
			color: #fff;
			cursor: pointer;
			transition: all 200ms ease-in-out;
		}
		#ventanaPOP .mensajeBox button:hover{
			background-color: #000 !important;
		}
		div#ventanaPOP .mensajeBox i:before {
			font-size: 360%;
			margin-bottom: 30px;
			display: block;
		}



	div#ventanaPOP.ok .mensajeBox i:before{
		color: #1ba902;
	}
	div#ventanaPOP.ok .mensajeBox{
		border: 8px solid #1ba902;
	}
	div#ventanaPOP.ok .mensajeBox button{
		background-color: #1ba902;
	}

	div#ventanaPOP.alert .mensajeBox i:before{
		color: #ddaa01;
	}
	div#ventanaPOP.alert .mensajeBox{
		border: 8px solid #ddaa01;
	}
	div#ventanaPOP.alert .mensajeBox button{
		background-color: #ddaa01;
	}

	div#ventanaPOP.error .mensajeBox i:before{
		color: #b42b08;
	}
	div#ventanaPOP.error .mensajeBox{
		border: 8px solid #b42b08;
	}
	div#ventanaPOP.error .mensajeBox button{
		background-color: #b42b08;
	}












/* ==========================================================================
	Estilos visiales para WhatsApp chat
========================================================================== */
@keyframes hover {
	0% {
	  transform: translateY(6px) scale(.96);
	}
	100% {
	  transform: translateY(-6px) scale(1);
	}
  }
div#whatsapp {
    width: 110px;
    height: 110px;
    position: fixed;
    bottom: 6vh;
    right: 6vw;
    cursor: pointer;
    border-radius: 50%;
	z-index: 9998;
	animation: hover 2s infinite ease-in-out alternate;
}
@media screen and (orientation:portrait) and (max-width: 680px){
	div#whatsapp {
		width: 74px;
		height: 74px;
		bottom: 10vh;
		right: 4vw;
	}	
}






/* ==========================================================================
	Estilos visiales para WhatsApp chat
========================================================================== */
.idaAcordeon .box{
	position: relative;
}
	.idaAcordeon .box .titulo {
		position: relative;
		background-color: #eee;
		cursor: pointer;
		padding: 18px;
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		font-size: 15px;

		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.idaAcordeon .box.activo .titulo,
	.idaAcordeon .box .titulo:hover{
		background-color: var(--colorPrincipal);
	}
		.idaAcordeon .box .infoAc{
			width: 100%;
			text-align: left;
			font-size: clamp(1rem, 1vw + 1rem, 1.2rem);
			max-height: 0px;
			overflow: hidden;
			opacity: 0;

			/* -webkit-transition: height, max-height, opacity, 0.3s ease-in-out;
			-moz-transition: height, max-height, opacity, 0.3s ease-in-out;
			-o-transition: height, max-height, opacity, 0.3s ease-in-out;
			-ms-transition: height, max-height, opacity, 0.3s ease-in-out;
			transition: height, max-height, opacity, 0.3s, 0.3s, 2.3s ease-in-out; */
			transition-property:  height, max-height, opacity;
			transition-duration: 0.5s, 0.5s, 1s;
			transition-timing-function: cubic-bezier(.7,-.01,.3,1);
		}
			.idaAcordeon .box h4.titulo {
				font-size: clamp(18px, 1vw + 1.4rem , 22px);
			}
			.idaAcordeon .box .infoAc .boxInfoAcor{
				width: 100%;
				padding: 18px;
				padding-left: 48px;
			}
		
		.idaAcordeon .box.activo .infoAc{
			opacity: 1;;
		}














/* ==========================================================================
	Estilos visiales del sitio.
========================================================================== */
.anchorTagEl{
	display: block;
	position: relative;
	top: -120px;
	left: 0px;
	visibility: hidden;
	width: 1px;
	height: 1px;
	opacity: 0;
}
#fondo_body{
	background : white;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

nav#menu {
    display: flex;
    justify-content: center;
    background-color: aliceblue;
    padding: 20px 0px;
	position: fixed;
    top: 0px;
    left: 0px;
	z-index: 700;
}
	#menu a {
		text-decoration: none;
	}
	nav#menu > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		grid-gap: 24px;
	}
		ul#menuBox {
			display: flex;
			justify-content: flex-end;
			grid-gap: 40px;
		}
			div#logo {
				height: 52px;
			}
				div#logo img {
					width: auto;
					height: 100%;
				}

			ul#menuBox li {
				font-family: 'Montserrat';
				font-size: 120%;
				font-weight: 600;
				color: var(--colorBackColor);
				cursor: pointer;

				transition: all 200ms ease-in-out;
			}
			ul#menuBox li:hover{
				color: var(--colorPrincipal);
			}

			div#menuMobileBox {
				width: 80vw;
				height: 100vh;
				position: fixed;
				top: 0px;
				right: -80vw;
				background-color: var(--colorBackColor);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-content: flex-end;
				flex-wrap: wrap;
				padding: 8vw;
				grid-gap: 32px;
				color: white;

				-webkit-transition: right 0.35s, -webkit-transform 0.35s;
				transition: right 0.35s, transform 0.35s;
			}
			#menuBoxMobile.activo div#menuMobileBox{
				right: 0vw;
			}
			div#menuMobileBox a{
				color: #fff;
			}
				div#menuMobileBox li {
					width: auto;
					font-family: 'Montserrat';
					font-weight: 600;
					font-size: clamp(22px, 6vw, 54px);
					padding: 8px 4px 8px 24px;
    				text-align: right;

					-webkit-transition: all 0.35s, -webkit-transform 0.35s;
					transition: all 0.35s, transform 0.35s;
				}
				div#menuMobileBox li:hover{

				}
			div#menuMobileBtn {
				position: relative;
				z-index: 8000;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28px;
			}
			#menuBoxMobile.activo div#menuMobileBtn {
				color: #fff;
			}
				div#imgClose {
					display: none;
				}
				#menuBoxMobile.activo div#imgClose {
					display: inherit;
				}
				#menuBoxMobile.activo #imgMenuMobile{
					display: none;
				}
				.iconosMobileMenu {
					display: block;
					position: absolute;
				}

#inicio{
	height: 80vh;
	justify-content: flex-end;
}
	div#inicio .fondo {
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		div#inicio .fondo img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top;
		}

	div#inicio .container {
		width: 60%;
		display: flex;
		justify-content: center;
		position: relative;
		align-items: center;
		grid-gap: 3vw;
		color: white;
		padding-top: 100px;
	}
		div#inicio .container .logo img {
			height: 16vh;
		}
		div#slogan {
			font-size: clamp(12px, 1vw, 40px);
			padding: 0px 3vw 1.8em 3vw;
    		border-left: 1px solid #fff;
		}
			div#slogan h1 {
				font-weight: 400;
				font-family: 'Montserrat';
			}
			div#slogan p {
				font-size: 150%;
    			font-weight: 400;
			}
@media screen and (orientation:portrait){
	#inicio{
		height: 78vh;
	}
	div#inicio .container {
		width: 80%;
		flex-direction: column;
		text-align: center;
	}
	div#slogan {
		border-left: 0px none transparent;
		border-top: 1px solid #fff;
		width: 82%;
		margin: 0px;
		margin-top: 21px;
	}
		
}
@media screen and (orientation:portrait) and (min-aspect-ratio: 2/3){
	div#inicio .container .logo img {
		height: 12vw;
	}
}
@media (min-aspect-ratio: 13/9) and (orientation:landscape) {
	
}
@media (min-aspect-ratio: 15/8) and (orientation:landscape) {
		div#inicio .fondo img {
			transform: translateY(0%);
		}
}
	

div#empresa {
	position: relative;
    background-color: var(--colorPrincipal);
}
	div#empresa .container {
		padding: 9vh 10% 9vh 0px;
		display: flex;
		justify-content: center;
	}
		#textoEmpresa {
			width: 80%;
			max-width: 1260px;
			padding: 2vh 2vw;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			color: white;
		}
			#textoEmpresa h2 {
				font-size: clamp(28px, 2.4vw, 48px);
				margin-bottom: 25px;
			}
			#textoEmpresa p {
				font-size: clamp(20px, 1.3vw, 38px);
			}


		div#servicios {
			flex-direction: column;
			align-items: center;
			background-color: white;
			padding: 12vh 0px;
			overflow-x: hidden;
		}
			div#servicios .container {
				display: grid;
				text-align: left;
				max-width: 860px;
			}
				div#servicios .container h2 {
					font-size: clamp(28px, 2.4vw, 48px);
					margin-bottom: 25px;
				}
				div#info {
					width: 100%;
					position: relative;
					display: grid;
					grid: 'g p'
						'f f';
					grid-gap: 40px;
					grid-template-columns: 1fr 1fr;
				}
					div#articulosBox article {
						position: relative;
						flex: 1 1 33.333%;
						display: flex;
						justify-content: center;
						align-items: center;
						aspect-ratio: 1;
						overflow: hidden;
						cursor: pointer;
					}
						article#servGeneral {
							grid-area: g;
						}
						article#servPatrimonio {
							grid-area: p;
						}
						article#servFamiliar {
							grid-area: f;
						}
							#info article img {
								width: 100%;
								height: auto;
								aspect-ratio: 1;
								object-fit: cover;
							}
							article#servFamiliar img {
								aspect-ratio: 2/1;
							}
							#info article figcaption {
								margin-top: 26px;
								font-size: 120%;
							}
								#info article figcaption h3 {
									font-size: clamp(18px, 1.4vw, 28px);
									margin-bottom: 12px;
									color: var(--colorPrincipal);
								}
			div#todos {
				position: relative;
				padding-top: 7vh;
			}
			div#todos > h3{
				font-size: clamp(22px, 2.4vw, 38px);
				margin-bottom: 2rem;
			}
				div#acordeonServicios {
					display: flex;
					flex-direction: column;
					grid-gap: 24px;
				}
					.idaAcordeon .box h4.titulo {
						font-size: clamp(18px, 1vw + 0.4rem , 22px);
						font-weight: 700;
						background-color: var(--colorSecundario);
						padding-left: 66px;
						padding-right: 28%;
					}
						.idaAcordeon .box h4.titulo::before{
							content: "";
							width: 20px;
							height: 100%;
							display: block;
							position: absolute;
							top: 0px;
							left: 0px;
							background-color: var(--colorPrincipal);

							-webkit-transition: all 0.3s ease-in-out;
							-moz-transition: all 0.3s ease-in-out;
							-o-transition: all 0.3s ease-in-out;
							-ms-transition: all 0.3s ease-in-out;
							transition: all 0.3s ease-in-out;
						}
					.idaAcordeon .box.activo h4.titulo,
					.idaAcordeon .box h4.titulo:hover{
						color: #fff;
					}
						.idaAcordeon .box.activo h4.titulo::before,
						.idaAcordeon .box h4.titulo:hover::before{
							background-color: var(--colorBackColor);
							width: 50px;
						}
					.idaAcordeon .box ul {
						list-style: inside;
						padding-left: 24px;
					}
				#imgBusto {
					width: 72%;
					position: absolute;
					top: -1vh;
					right: 0;
					transform: translateX(56%);
				}
					#todos picture img {
						width: 100%;
						height: auto;
					}


				
	div#columnaFondo {
		display: block;
		position: absolute;
		height: 100%;
		width: clamp(130px, 20vw, 600px);
		top: 0px;
		right: 0vw;
		z-index: 0;
	}
		div#columnaFondo img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: left top;
		}
				
				









div#contacto .fondo {
    width: 100%;
    display: flex;
    height: 100vh;
    position: fixed;
    z-index: -1;
    top: 0px;
    left: 0px;
}
	div#contacto .fondo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: bottom;
	}
	div#contactoBox {
		width: 100%;
		height: 40vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
	}
	div#contactoBox a {
		color: white;
		text-decoration: none;
	}
		#contacto h3 {
			font-size: clamp(28px, 2.4vw, 48px);
			margin-bottom: 25px;
		}
		#contacto p {
			width: 60%;
			text-align: center;
			margin-bottom: 2em;
			font-size: 120%;
		}
		#contacto span {
			font-family: 'Montserrat';
			font-size: clamp(14px, 5vw, 34px);
			cursor: pointer;

			-webkit-transition: color 0.35s, -webkit-transform 0.35s;
			transition: color 0.35s, transform 0.35s;
		}
		#contacto span:hover{
			color: var(--colorPrincipal);
		}
		









	div#redes {
		width: 100%;
		background-color: var(--colorBackColor);
		padding: 8vh;
		align-items: center;
	}
		div#redes .container {
			display: flex;
			align-content: stretch;
			grid-gap: 42px;
		}
			div#redes .container .col3 {
				flex: 1 1 33.333%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
			}
			div#redes .container div#redesBox {
				flex-direction: column;
				align-items: flex-start;
				text-align: left;
			}
				div#redes .container div#redesBox span {
					margin-bottom: 38px;
				}
				div#redes .container div#redesBox .redesMain {
					display: flex;
					grid-gap: 36px;
				}
				
			div#logoFooter img {
				width: 146px;
			}
		div#footer {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #262626;
			padding: 20px;
		}
			div#footer .container {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			div#footer .container img {
				width: 200px;
				height: auto;
			}
			






.hi-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    color: #fff;
	font-size: 54px;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}


/* Effect 1 */
.hi-icon-effect-1 .hi-icon {
	background: rgba(255,255,255,0.1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hi-icon-effect-1 .hi-icon:after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}

/* Effect 1a */
.hi-icon-effect-1a .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #862671;
}

.hi-icon-effect-1a .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 1b */
.hi-icon-effect-1b .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #862671;
}

.hi-icon-effect-1b .hi-icon:after {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.hi-icon-effect-1b .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}





















/* ==========================================================================
	Estilos para un espect ratio de 2:1
========================================================================== */
@media (min-aspect-ratio: 2/1) {
	
}

/* ==========================================================================
	Estilos para un espect ratio de 8:5
========================================================================== */
@media (min-aspect-ratio: 8/5) {
	
}






/* ==========================================================================
	Estilos para un especto de pie
========================================================================== */
@media screen and (orientation:portrait){
	:root{
		--margenGlobal: 8vw;
	}
	.onlyLanscape{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}


	
}
/* ==========================================================================
	Estilos para un especto de pie pero en dispositivos pequeños
========================================================================== */
@media screen and (orientation:portrait) and (max-width: 680px){
	
}







/* ==========================================================================
	Estilos para un especto de acostado
========================================================================== */
@media screen and (orientation:landscape){
	.onlyPortrait{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}	
}
/* ==========================================================================
	Estilos para un especto acostado pero en dispositivos medianos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 980px){

}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 860px){

}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 720px){
	
}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos muy chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-height: 460px){

}
















/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1600px) {

}









/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1280px) {

}







/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1024px) {

}






/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (min-width: 860px) {
	
}








/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 846px) {
	:root{
		--margenGlobal: 8vw;
	}
}






@media only screen and (max-width: 760px){
	.onlyDesktop{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}

	div#contactoBox {
		height: auto;
		font-size: 70%;
		padding: 50px 20px;
	}
		div#redes .container .col3 {
			flex: 1 1 50%;
			flex-wrap: wrap;
		}

		div#redes .container {
			flex-direction: column-reverse;
		}
		div#redes .container div#redesBox {
			margin-top: 20px;
		}


	.idaAcordeon .box h4.titulo {
		padding-left: 36px;
		padding-right: 24vw;
	}
		.idaAcordeon .box h4.titulo::before {
			width: 12px;
		}
		.idaAcordeon .box.activo h4.titulo::before,
		.idaAcordeon .box h4.titulo:hover::before {
			width: 26px;
		}

	.idaAcordeon .box .infoAc .boxInfoAcor {
		padding-left: 18px;
	}
		.idaAcordeon .box ul {
			list-style: circle;
			padding-left: 24px;
		}
}
@media only screen and (min-width: 760px){
	.onlyMobile{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}
}





/* ==========================================================================
	Estilos para un especto acostado pero en dispositivos medianos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 980px) and (max-height: 600px){
	nav#menu {
		padding: 10px 0px;
	}
		div#logo {
			height: 28px;
		}

	#inicio {
		height: 86vh;
	}
}

/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 680px) {
	nav#menu {
		padding: 10px 0px;
	}
		div#logo {
			height: 28px;
		}


	div#articulosBox {
		flex-direction: column;
	}
		div#articulosBox article {
			flex: 1 1 100%;
			width: 100%;
			min-width: 100%;
			max-width: 100%;
		}

	div#info {
		grid: 'g'
			'p'
			'f';
		grid-template-columns: 1fr;
	}
	article#servFamiliar img {
		aspect-ratio: 1;
	}
}






/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 590px) {
	
}





/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 480px) {
	
}










/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 370px) {
	div#slogan {
		text-align: center;
	}

	div#slogan h1 {
		font-size: 1.6em;
	}
	div#slogan p {
		font-size: 120%;
	}
}