@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*,
*::before,
*::after {
	box-sizing: border-box;

}

body {
	background-color:white;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	font-size: 20px;

	/*Para evitar el scrollbar*/

}

h1 {
	letter-spacing: -1.2px;

}

/*----------------------------------
			SVG para line scroll
---------------------------------*/
.contenedor-linea {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
	z-index: -1;
}

svg {
	display: inline-block;
	height: 100%;
	color: #2BA3D0;
}




/*----------------------------------
		   Navbar y menu
----------------------------------*/

header {
	background-color: transparent;
	display: flex !important;
	letter-spacing: -1.5px;
	/*Espacio entre letras para headers*/
	z-index: 1000;
	/*Numero para index alto respecto al resto de la página*/
	justify-content: space-between;
	align-items: center;
	height: 70px;
	width: 100%;
	padding: 5px 50px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transition: background-color 0.4s ease-in-out;
}

header.scrolled {
	background-color: #24262b;

}

#header-informacion{
	background-color: #24262b !important;
}

.encabezado .logo {
	cursor: pointer;

}

.encabezado .logo img {
	height: 60px;
	width: auto;
	margin: 0;
	transition: all 0.4s;
}

.encabezado .logo img:hover {
	transform: scale(1.3);
}

.encabezado .nav-links {
	list-style: none;
}

.encabezado .nav-links li {
	display: inline-block;
	padding: 0 2rem;
}

.encabezado .nav-links a {
	font-size: 20px;
	display: block;
	letter-spacing: -1px;
	font-weight: 600;
	min-width: 80px;
	text-align: center;
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	color: rgb(255, 255, 255);
	padding: 9px;
	background: transparent;
	border: none;

	cursor: pointer;
	transition: all 0.3s ease 0s;
	transition: color 0.2s ease-in-out;
}

header.scrolled nav a {
	color: black;
}

.encabezado .nav-links a:hover {
	background-color: wheat;
	border-radius: 10px;
	color: var(--AtreaAzul);

	/*background-color: #ebba70ff;*/
}


.encabezado .btn button {
	display: none;
	cursor: pointer;
}

.encabezado .menu {
	min-width: 80px;
	text-decoration: none;
}

.encabezado .menu button {
	display: block;
	cursor: pointer;
	border: none;
	text-decoration: none;
	background-color: transparent;
	transition: all 0.2s ease 0s;
}

.bar {
	display: block;
	width: 40px;
	height: 4px;
	margin: 8px 10px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: white;

}


.encabezado .menu button:hover {
	scale: 1.2;
}

.ul-second {
	text-align: center;
	display: none;
	position: absolute !important;
	background-color: #24262b;
	transform: translateX(-25px);
	border-radius: 20px;
	width: 160px !important;

}

.ul-second>li {
	transform: translateX(-60px);
	width: 200px !important	;
}


.desplegar:hover>.ul-second {
	display: flex;
	flex-direction: column;
	width: auto;
}

.sublist a {
	font-size: 18px !important;
	font-weight: 400 !important;
	text-align: center !important;
}
/*Decoración menu responsivo*/

.encabezado a {
	text-decoration: none;

}

.encabezado .overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	background-color: rgba(56, 47, 65, 0.95);
	overflow: hidden;
	transition: all 0.3s ease 0s;
	list-style: none;

}

.encabezado .overlay .overlay-content {
	display: flex;
	height: 100%;
	width: auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

.encabezado .overlay a {
	padding: 15px;
	font-size: 40px;
	display: block;
	transition: all 0.4s ease 0s;
	font-weight: 700;
	color: #ffffff;
}

.encabezado .overlay a:hover,
.encabezado .overlay a:focus {
	color: var(--AtreaNaranja);
}

.encabezado .overlay .close {
	position: absolute;
	top: 20px;
	right: 45px;
	font-size: 65px;

}


@media screen and (max-width: 1350px) {

	.nav-links,
	.btn {
		display: none;
	}

	.menu {
		display: inherit;
	}

	.btn {
		display: block;
	}

	.btn.active .bar:nth-child(2) {
		opacity: 0;
	}

	.btn.active .bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.btn.active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

}

#infoHeader{
	background-color: #24262b !important;

}

/*----------------------
 	Estilo de la Sidebar
 ------------------------*/

.sidebar {
	position: fixed;
	z-index: 1001;
	top: 30%;
	left: 0;
}
.contenedor-sidebar a{
	color: var(--AtreaAzulLight);
	font-size: 18px !important;
}

.contenedor-sidebar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: transparent;
	border-radius: 0 5px 5px 0;
	width: auto;
	height: auto;
	transition: background-color 0.4s ease-in-out;
}

.contenedor-sidebar.scrolled{
	background-color: #24262b;
}

.contenedor-sidebar li {
	list-style-type: none;
	margin: 15px 5px !important;
	color: black;
}

.contenedor-sidebar #twitterLogo{
	fill: var(--AtreaAzulLight);
}

/*----------------------
 	Estilo del carrusel
 ------------------------*/
.carrusel{
	font-family: 'Poppins', sans-serif;
	letter-spacing: -1.5px;
}
.carousel-background {
	opacity: 1;
	background-color: black;
	position: static;
	height: 100vh;
	/* Ajusta la altura según necesites */
	background-size: cover;
	background-position: center;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Color de fondo semi-transparente */
    mix-blend-mode: multiply; /* Mezcla el color de fondo con la imagen de fondo */

}

.carousel-caption {
	position: absolute !important;
	top: 50% !important;
	/* Coloca el centro verticalmente */
	left: 50% !important;
	/* Coloca el centro horizontalmente */
	transform: translate(-50%, -50%) !important;
	/* Centra el contenido */
	color: white;
	text-align: center !important;
	/* Alinea el texto al centro */
	width: 80% !important;
	/* Ajusta el ancho según necesites */
	max-width: 1000px !important;
	/* Ajusta el ancho máximo según necesites */
	z-index: 1 !important;
	/* Asegura que el texto esté sobre la imagen del carrusel */
}


.carousel-caption h1,
.carousel-caption h2,
.carousel-caption p {
	margin-bottom: 20px !important;
	color: #ffffff;
	text-shadow: 2px 2px 5px #000000;
	/* Espacio entre el título, subtítulo y el botón */
}
.carousel-caption p{
	font-size: 24px;
	font-weight: 400;
}

.carousel-caption h1{
	font-size: 60px;
	font-weight: 600;
}

.carousel-caption h2{
	font-size: 30px;
	font-weight: 500;
}

.carousel-item a{
	font-size: 25px;
	margin-top: 20px !important;
	font-weight: 600 !important;
	border-radius: 40px;
	border-style: none;
	padding: 10px 50px;
	background-color: var(--AtreaAzulLight);
	color: black;
	transition: transform 0.2s ease;
}

.carousel-item a:hover{
	background-color: var(--AtreaNaranjaLight);
	color: var(--AtreaAzulDark);
	transform: translateY(-3px);
}

.carousel-indicators li {
    background-color: #ccc; /* Color de fondo de las bolitas */
    border-radius: 50%!important; /* Forma circular */
    width: 20px !important; /* Ancho de las bolitas */
    height: 20px !important; /* Altura de las bolitas */
    margin: 0 5px; /* Espacio entre las bolitas */
	transition: background-color 0.3s ease;
}
.carousel-indicators li:hover {
    transform: scale(1.1); /* Efecto de escala al pasar el ratón */
}

.carousel-item {
	position: relative;
	/* Asegura que la imagen del carrusel esté en la parte posterior */
}


@media screen and (max-width: 950px) {
	.carousel-caption h2{
		font-size: 20px;
	}
	.carousel-caption h1{
		font-size: 30px;
	}
	.carousel-caption p{
		font-size: 18px;
	}
}


/*-----------------------------
      Estilo de las cards
------------------------------*/

.services-section {
    text-align: center;
    margin-bottom: 40px;
}

.services-section h2 {
    font-size: 35px;
    margin-bottom: 20px;
	margin-top: 50px;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.service-card {
    flex: 1 0 calc(30% - 20px);
    margin: 20px;
    padding: 20px;
    border-radius: 50px;
    background-color: #ffffffff;
    text-align: center;
}


.service-card i {
    width: auto;
	border-radius: 20px;
    max-height: 250px; /* Ajusta este valor según lo que necesites */
    font-size: 150px;
    display: block;
    margin: 0 auto 40px;
    color: #2ba3d0;
}

.service-card h3 {
	font-size: 32px;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 20px;
	font-weight: 400;
	line-height: 30px;
}

@media only screen and (max-width: 768px) {
    .services-container {
        flex-direction: column;
    }

    .service-card {
        flex: 1 0 calc(100% - 40px);
        margin: 20px 0;
    }
    .service-card img{
        max-height: 200px;
    }
}

/*-----------------------------
    Estilo de Nosotros (inicio)
------------------------------*/
.contact-section {
    text-align: center;
    margin-bottom: 40px;
	background-color: var(--AtreaVerdeLight);
	padding: 30px;
}

.contact-section h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.contact-section p {
    font-size: 20px;
    margin-bottom: 20px;
}

.contact-button {
    display: inline-block;
    font-weight: 900;
    padding: 10px 50px;
	font-size: 20px;
    background-color: var(--AtreaAzulLight);
	color: black;
    text-decoration: none;
    border-radius: 40px;
    transition: all 0.3s ease;
}

.contact-button:hover {
	background-color: var(--AtreaNaranjaLight);
	color: var(--AtreaAzulDark);
	transform: translateY(-3px);
	text-decoration: none;
}

.contact-button a{
	text-decoration: none;
}

/*-----------------------------
      Estilo de Proyectos (inicio)
------------------------------*/
.projects-section {
    text-align: center;
    margin-bottom: 40px;
	margin-left: 20px;
	margin-right: 20px;
}

.projects-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
}

.project-card {
    padding: 20px;
    background-color: #f3f3f3;
    text-align: center;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.18);
}

.project-card img {
    width: 100%;
    height: auto;
    max-width: 400px; /* Ajusta este valor según lo que necesites */
    display: block;
    margin: 0 auto 15px;
}

.project-card h3 {
    margin-bottom: 10px;
}

.project-card p {
    font-size: 18px;
}



/*-------------------------------------------
            Estilo Contacto
-------------------------------------------*/
.mapa-informacion {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea el contenido arriba */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas más pequeñas */
    gap: 20px; /* Espacio entre los elementos */
    padding: 20px;
}

.mapa {
    flex: 1; /* La mitad del espacio disponible */
}

.mapa iframe {
    width: 60vw;
    height: 100vh;
}

.contenedor-informacion {
    flex: 1; /* La mitad del espacio disponible */
    max-width: 500px; /* Limita el ancho del contenedor de información */
}

.cajaDireccion,
.cajaRedesSociales {
    margin-top: 20px; /* Espacio entre las secciones de dirección y redes sociales */
}

.cajaRedesSociales{
    display: flex; /* Para que los íconos estén en línea */
    flex-direction: column;
    align-items: center;
}

.cajaRedesSociales a {
    background-color: #007bff;
    border-radius: 20px;
    padding: 20px;
    color: #ffffff; /* Cambiado a blanco para mejorar la visibilidad */
    display: inline-flex; /* Para que los íconos estén en línea */
    align-items: center; /* Centra verticalmente los íconos */
    text-decoration: none; /* Elimina el subrayado predeterminado */
    margin: 5px; /* Espacio entre los íconos */
}

/* Ajustes para dispositivos más pequeños */
@media screen and (max-width: 768px) {
    .mapa-informacion {
        flex-direction: column; /* Cambia a apilado en dispositivos más pequeños */
    }

    .mapa,
    .contenedor-informacion {
        width: 100%; /* Ocupa todo el ancho en dispositivos más pequeños */
    }

    .mapa iframe {
        height: 500px; /* Reduce la altura del mapa en dispositivos más pequeños */
        width: 100%; /* Asegura que el mapa se ajuste correctamente */
    }

    .cajaRedesSociales a {
        padding: 15px; /* Reducción del espacio alrededor de los íconos en dispositivos más pequeños */
    }
}






/*---------------------------------------
		Scroll animation Powell
---------------------------------------*/

/*para cuestiones de demo se crea una barra superior que
muestra el avance de la scrollbar*/

.scrollWatcher {
	height: 10px;
	position: fixed;
	top: 0;
	z-index: 1000;
	background-color: blueviolet;
	width: 100%;
	scale: 0 1;
	transform-origin: left;
	animation: scrollWatcher linear;
	animation-timeline: scroll();
}

@keyframes scrollWatcher {
	to {
		scale: 1 1
	}

	;
}


/*----------------------------------
		Landing Inicio (Hero)
----------------------------------*/

.landing-hero-imagen {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	filter: brightness(0.6);
}


/*-------------------------------------------
			Landing Contacto
-------------------------------------------*/

.landingContacto {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: -1.5px;
	line-height: 75px;
	background-color: black;
	color: white;
}

.landingContacto h1 {
	text-align: center;
	font-size: 50px;
	font-family: 'Montserrat', sans-serif;
	z-index: 1000;
}

.landingContacto h2 {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	z-index: 1000;
}

/*-------------------------------------------
			Landing About Us
-------------------------------------------*/

.landing {}

.contenedorLanding {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	letter-spacing: -1.5px;
	line-height: 75px;
	background-color: black;
	color: white;
}

.landingImg {
	position: absolute;
	inset: 0;
	opacity: 100;
	transition: 200ms opacity ease-in-out;
	transition-delay: 200ms;
}

.landingImg>img {
	display: block;
	opacity: 0.65;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.contenedorLanding h1 {
	text-align: center;
	font-size: 50px;
	font-family: 'Montserrat', sans-serif;
	z-index: 10;
}

.contenedorLanding h2 {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	z-index: 10;
}


/*-------------------------------------------
        About Us
-----------------------------------------*/

.about-section {
	margin: 40px;
  }
  
  .row {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 80px;
	text-align: center;
  }

  .row-2 {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-top: 80px;
	text-align: center;
  }
  
  .section {
	flex-basis: calc(70% - 20px);
	background-color: white;
	border-radius: 50px;
	padding: 20px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	margin-bottom: 30px;
  }
  
  .button-container-media {
	flex-basis: calc(50% - 20px);
	text-align: center;
	margin-bottom: 30px;
  }
  
  .row button,
  .row-2 button {
	font-size: 20px;
	font-weight: 600;
	border: none;
	padding: 15px 30px;
	background-color: #FF4500;
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  
  .row button:hover,
  .row-2 button:hover {
	background-color: #FF6347;
  }
  
  .section h2 {
	font-size: 28px;
	margin-bottom: 30px;
  }
  
  .section a {
	text-decoration: none;
  }
  
  .row p {
	font-size: 20px;
	line-height: 30px;
	text-align: left;
	padding: 20px;
  }

  .row-2 p{
	font-size: 20px;
	line-height: 30px;
	text-align: right;
	padding: 20px;
  }
  
  .section i {
	margin-right: 10px;
	font-size: 20px;
	color: #007bff;
  }
  
  .section img {
	height: 150px;
	margin: auto;
	display: block;
	border-radius: 40px;
  }
  

  @media only screen and (max-width: 768px) {
	.section,
	.button-container-media {
	  flex-basis: calc(100% - 20px);
	  
	}
  
	.button-container {
	  display: none;

	}

	.section p{
		text-align: justify;
	}

	.row, .row-2{
		justify-content: center;
	align-items: center;
	}
  }
  
  /*---------------------------------------
  		Informacion Full
-----------------------------------------*/

main {
	padding: 20px;
	margin-top: 100px;
	margin-bottom: 100px;
  }
  
  .article-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px;
	background-color: white;
	border-radius: 100px;
  }
  
  .article-title {
	font-size: 2rem;
	margin-bottom: 20px;
  }
  
  .article-content {
	font-size: 1.5rem;
	line-height: 1.5;
	text-align: justify;
  }
  
  .article-container h2 {
	font-size: 1.5rem;
	margin-top: 100px;
	margin-bottom: 10px;
  }
  
  .article-container p {
	margin-bottom: 20px;
  }
  
  @media only screen and (max-width: 768px) {
	.article-container{
		padding: 30px;
		border-radius: 50px;
	}
	.article-content{
		font-size: 1.2rem;
	}
  }
  


/*-------------------------------------
				Landing Autismo
--------------------------------------*/

.landingAutismo {
	
}

.landingAutismoContenedor{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	letter-spacing: -1.5px;
	line-height: 75px;
	background-color: black;
	color: white;
	
}


.landingAutismo h1 {
	text-align: center;
	font-size: 50px;
	font-family: 'Montserrat', sans-serif;
	z-index: 10;

}

.landingAutismo h2 {
	text-align: center;

	font-family: 'Montserrat', sans-serif;
	z-index: 10;
}


/*-------------------------------------
			Estilos Autismo
--------------------------------------*/

.autism-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
	margin-top: 40px;
	margin-left: 50px;
	margin-right: 50px;
}

.autism-subsection {
    flex-basis: calc(100% - 10px);
    background: linear-gradient(to bottom right, #f7f8ff, #2ba3d0);
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
	text-align: justify;
}

.autism-subsection:hover {
    transform: translateY(-5px);
}

.autism-subsection h2 {
    font-size: 22px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.autism-subsection h2 i {
    margin-right: 10px;
    font-size: 20px;
}

.autism-content p {
    font-size: 20px;
	line-height: 40px;
}

/*-----------------------------------
 	Estilo de Política y Privacidad
 -----------------------------------*/

 .politicaYP{
	margin: 50px 20px;
	padding: 30px 40px;
 }

 .politicaYP h1{

	margin:  20px 100px 70px 90px;
 }

 .politicaYP p{
	font-size: 18px;
	margin:  20px 100px;
	text-align: justify;
 }

 .politicaYP li{
	font-size: 18px;
	margin:  20px 100px;
	list-style-type: none;
 }

 @media screen and (max-width: 1200px) {
	.politicaYP p{
		margin: 15px 10px;
	}
	.politicaYP li{
		margin: 10px 10px;
	}
	.politicaYP h1{
		margin: 30px 10px;
	}
 }

/*-----------------------------------------
				 Footer
-----------------------------------------*/

.footer-main {
	background-color: #24262b;
	padding: 80px 0;
}

.footer-contenedor {
	max-width: 1200px;
	margin: 0 auto;
}

.footer-fila {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

.footer-links {
	width: 25%;
	padding: 0 15px;
}

.footer-links h4 {
	font-size: 20px;
	color: white;
	letter-spacing: -1px;
	margin-bottom: 2rem;
	font-weight: 500;
	border-bottom: 2px solid var(--AtreaAzul);
	padding-bottom: 15px;
	display: inline-block;
}

.footer-links ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.footer-links ul li a {
	font-size: 20px;

	text-decoration: none;
	color: gray;
	display: block;
	margin-bottom: 5px;
	transition: all 0.3s ease;
}

.footer-links ul li a:hover {
	color: white;
	padding-left: 10px;
	transform: scale(1.07);
}

.footer-links input {}

.social-links a {
	display: inline-block;
	min-height: 40px;
	width: 40px;
	background-color: rgba(255, 255, 255, .2);
	margin: 0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 15px;
	color: white;
	transition: all .5s ease;
}

.social-links a:hover {
	background-color: var(--AtreaAzul);

	transform: scale(1.1);
}

.footer-main p {
	color: white;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 0;
	padding: 0;
}

.footer-main #footer-address {
	font-size: 16px;

	text-decoration: none;
	color: gray;
	display: block;
}

/*Animaciones de fade in*/

@keyframes fadeup {
	0% {
		opacity: 0;
		transform: translateY(50px);

	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

/* Media Query para desactivar animaciones y mostrar el elemento*/
@media(prefers-reduced-motion) {
	.hidden {
		transition: none;
	}
}

/* Media Query para dispositivos moviles Height*/
@media screen and (max-height: 450px) {
	.encabezado .overlay a {
		font-size: 20px;
	}

	.encabezado .overlay .close {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}

	.sidebar{
		visibility: hidden;
	}
}

/* Media Query para dispositivos moviles Width*/
@media screen and (max-width: 800px) {
	.pie-pagina {
		grid-auto-flow: row;
	}

}

/* Media Query para dispositivos moviles Contacto*/
@media (max-width: 900px) {
	.cajaDireccion {
		font-size: 12px;
		text-align: center;
		line-height: 15px;
	}
}

/* Media Query para dispositivos moviles Footer*/
@media (max-width: 991px) {
	.footer-fila {
		text-align: center;
	}

	.footer-links {
		width: 100%;
		margin-bottom: 30px;
	}

}

/* Media Query para dispositivos moviles Contacto*/
@media (max-width: 1300px) {
	.cajaDireccion {
		font-size: 17px;
		text-align: center;
	}

	.cajaScroll {
		font-size: 12px;
		padding: 10px;
		margin: 0;
		text-align: center;
		align-items: center;
	}
}

@media (max-height: 1000px) {}


/*Variables*/
:root {
	--space: #3b3164ff;
	--pear: #b6c71fff;
	--white: #ffffffff;
	--navbar: #101010;
	--AtreaNaranja: #EA8A38;
	--AtreaAzul: #2BA3D0;
	--AtreaVerde: #C2D543;
	--AtreaMorado: #532c78;
	--AtreaNaranjaDark: #b0692b;
	--AtreaAzulDark: #1c647d;
	--AtreaVerdeDark: #85932e;
	--AtreaMoradoDark: #1d102a;
	--AtreaNaranjaLight: #ebb07c;
	--AtreaAzulLight: #77b7ce;
	--AtreaVerdeLight: #c7d183;
	--AtreaMoradoLight: #6a577b;
}