/********************************/
/*estilos generales de la página*/
/********************************/
* {
	/*reseteo todos los elementos para que por default tengan
	un margen 0 y padding 0 y un modelo de caja tipo border-box*/
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Open Sans', sans-serif; /*especifico el nombre y familia de la tipografia a usar*/
}
html {
  scroll-behavior: smooth; /*para desplazarse "scrolear" suavemente dentro de la página al presionar un enlace*/

}
/***************************************************/

/**********************************/
/*estilos para header de la página*/
/**********************************/
header {/*caracteristicas elementos dentro del header de la pagina*/
	font-size: 24px; /*tamaño de las fuentes que aprecen en el header*/
  	background-color: #7b2125;  /*color fondo encabezado*/
    height: 55px;  /* altura del encabezado, equivale a 5.5em*/
    padding-left: 10%; /*hago un espacio a la izquierda al interior del contenedor header de 10% del ancho del viewport*/
    padding-right: 10%; /*hago un espacio a la derecha al interior del contenedor header de 10% del ancho del viewport*/
  	box-shadow: 0 1px 8px grey; /*efecto de material con sombreado sobre el fondo*/
    transition: 100ms; /*para la transicion con media queries diseño responsivo*/
	position: sticky;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
}
body{
	padding-top: 0;
}

.menu-container {/*caracteristicas elementos en contenedor con la clase menu-container*/
  	display: flex; /*tipo de layout felxbox*/
  	flex-direction: column; /*rederizara/dibujara los items/elementos hijos en el layout 
  	como una columna, un contenedor o un item sobre el otro */
}
.identificador {/*caracteristicas elementos en contenedor con la clase identificador*/
  	/*border: 5px solid #222;  /* For debugging */
  	width: 100%; /*ancho que tendra el contenedor con clase menu*/
  	display: flex; /*sera un elemento/item de tipo flex*/
  	justify-content: center; /*defino la alineación horizontal de los items hijos al centro*/
}
.identificador img{/*caracteristicas imagen identificadora dentro del contenedor con clase identificador*/
	margin-top: 15px; /*un margen arriba de 15 px*/
    height: 54.61px; /*ancho que tendra la imagen identificadora*/
}
.ligas-secciones{/*caracteristicas elementos en contenedor con la clase secciones*/
	/*border: 5px solid #555;  /* For debugging */
	width: 100%; /*ancho que tendra el contenedor con clase menu*/
	display: flex; /*sera un elemento/item de tipo flex*/
	justify-content: space-between; /*defino la alineación horizontal de los items hijos diciendo
	cuando hay mas de uno distribuya el esapcio restante entre los espacios de cada elemento/item*/
}
.ligas-secciones a{/*caracteristicas elementos tipo enlace dentro del contenedor con clase secciones*/
	color: #FFF; /*color que tendran las fuentes de los enlaces*/
	text-decoration: none; /*le quito decoraciones a los enlaces, saeln sin subrayar ahora*/
  	font-weight: normal; /*tipo de letra bold*/
 	margin-top: 10px;
 	transition: 50ms; /*para la transicion con media queries diseño responsivo*/
}
.ligas-secciones a:hover{
  transform: scale(1.03);
  transition: 50ms;
}
/***************************************************/

/********************************/
/*estilos para body de la página*/
/********************************/
.secciones {/*caracteristicas elementos en contenedor con la clase menu-container*/
  	display: flex; /*tipo de layout felxbox*/
  	flex-direction: column; /*rederizara/dibujara los items/elementos hijos en el layout 
  	como una columna, un contenedor o un item sobre el otro */
  	padding-left: 10%; /*hago un espacio a la izquierda al interior del contenedor header de 10% del ancho del viewport*/
    padding-right: 10%; /*hago un espacio a la derecha al interior del contenedor header de 10% del ancho del viewport*/
}
.texto-secc {
	display: flex; /*sera un elemento/item de tipo flex*/
	flex-direction: column; /*rederizara/dibujara los items/elementos hijos en el layout 
  	como una columna, un contenedor o un item sobre el otro */
}
.texto-secc h1{
	display: flex; /*sera un elemento/item de tipo flex*/
	justify-content: center; /*defino la alineación horizontal de los items hijos al centro*/
	margin-top: 25px;
}
.texto-secc p{
	font-size: 18pt;
	display: flex; /*sera un elemento/item de tipo flex*/
	margin-top: 10px;
}
.contenedor-imagen {
  	display: flex; /*sera un elemento/item de tipo flex*/
  	flex-direction: column;
  	align-items: center;
}
.imgs-secc-1{
	display: flex; /*sera un elemento/item de tipo flex*/
  	flex-direction: column;
  	align-items: center; 
}
.par-imgs-escritorio{/*caracteristicas elementos en contenedor con la clase secciones*/
	/*border: 5px solid #555;  /* For debugging */
	width: 65%; /*ancho que tendra el contenedor con clase menu*/
	display: flex; /*sera un elemento/item de tipo flex*/
	justify-content: space-around; /*defino la alineación horizontal de los items hijos diciendo
	cuando hay mas de uno distribuya el esapcio restante entre los espacios de cada elemento/item*/
}
.par-imgs-escritorio img{
	width: 50%;
	display: flex; /*sera un elemento/item de tipo flex*/
}
.par-imgs-escritorio img:hover{
  transform: scale(1.03);
  transition: 200ms;
}
.par-imgs-escritorio p{
	width: 40%;
	font-size: 16pt;
	font-style: italic;
	text-align: center;
	display: flex; /*sera un elemento/item de tipo flex*/
}
.par-imgs-mobile{/*caracteristicas elementos en contenedor con la clase secciones*/
	display: none;
}
.par-imgs-mobile img{
	display: none;
}
.par-imgs-mobile p{
	display: none;
}

.contenedor-imagen img{
	display: flex; /*sera un elemento/item de tipo flex*/
	width: 50%;
	transition: 200ms;
}
.contenedor-imagen img:hover{
  transform: scale(1.03);
  transition: 200ms;
}
.contenedor-imagen p{
	width: 50%;
	text-align: center;
	font-size: 16pt;
	font-style: italic;
	display: flex; /*sera un elemento/item de tipo flex*/
}
.contenedor-imagen-secc4{
	display: flex; /*sera un elemento/item de tipo flex*/
  	flex-direction: column;
  	align-items: center;
}
.contenedor-imagen-secc4 p{
	width: 80%;
	text-align: center;
	font-style: italic;
	font-size: 16pt;
	display: flex; /*sera un elemento/item de tipo flex*/
}
.contenedor-imagen-secc4 img{
	display: flex; /*sera un elemento/item de tipo flex*/
	width: 80%;
	transition: 200ms;
}
.contenedor-imagen-secc4 img:hover{
  transform: scale(1.03);
  transition: 200ms;
}
/***************************************************/


/**********************************/
/*estilos para footer de la página*/
/**********************************/
footer {
  	background-color: #f8f8f8;/*color fondo pie de pagina*/
  	margin-top: 40px;
  	display: flex; /*sera un elemento/item de tipo flex*/
  	flex-direction: column;
  	align-items: center;
	padding-top: 25px;
}
.footer-item{
	width: 100%;
  	display: flex; /*sera un elemento/item de tipo flex*/
  	justify-content: center; /*defino la alineación horizontal de los items hijos al centro*/
}
.footer-item img{
	height: 150px;
}
.copyright{
	font-size: 17pt;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 95px;
}
/***************************************************/

/*********************************/
/*estilos para icono hacia arriba*/
/*********************************/
.ir-arriba {
  	display: flex; /*sera un elemento/item de tipo flex*/
  	flex-direction: column;
  	align-items: center; 
}
.ir-arriba img{
  	height: 60px;
  	padding-right: 30px;
  	text-decoration: none;
  	cursor:pointer;
  	position:fixed;
 	bottom:20px;
}

.ir-arriba img:hover{
	transform: scale(1.1);
  	transition: 100ms;
}
/***************************************************/

.fondo_degradado{
	background: linear-gradient(to bottom, #ffffff, #cdcdcd); /*degradado de color*/
  	background-size: 100% 100%; /*tamaño del fondo*/
  	background-repeat: no-repeat; /*no se repite el fondo*/
  	background-attachment: fixed; /*el fondo se queda fijo*/
}

.w-full{
	margin-left: -13%;
	margin-right: -13%;
	padding-left: 13%;
	padding-right: 13%;
}

.w-full img{
	width: 100%;
	height: auto;
  	transition: 200ms;
}

.flex{
	display: flex; /*sera un elemento/item de tipo flex*/
  	flex-direction: row;
  	align-items: center;
	justify-content: center;
	gap: 25px;
}

.flex img {
	width: 100%;
	height: auto;
  	transition: 200ms;
}

.flex .flex-1 {
  	flex: 1;
}

.flex .flex-2 {
  	flex: 2;
}

a.btn{
	display: inline-block;
	background-color: #7b2125; /*color de fondo del boton*/
  	color: #FFF; /*color que tendran las fuentes de los enlaces*/
  	text-decoration: none; /*le quito decoraciones a los enlaces, saeln sin subrayar ahora*/
  	font-weight: normal; /*tipo de letra bold*/
  	padding: 10px 30px; /*espacio al interior del boton*/
  	border-radius: 25px; /*bordes redondeados*/
  	transition: 200ms;
	text-align: center;
	cursor: pointer;
}
/**media query cuando ancho es menor o igual a 700px**/
@media screen and (max-width: 700px){
	header {
		font-size: 16px;
		height: 40px;
	}

	.texto-secc h1{
		font-size: 18px;
	}
	.texto-secc p{
		font-size: 12px;
	}


	.contenedor-imagen img{
		width: 100%;
		transition: 200ms;
	}
	.contenedor-imagen p{
		width: 100%;
		font-size: 12pt;
	}

	.footer-item{
		flex-direction: column;
		align-items: center;
	}
	.footer-item img{
		height: 50px;
		margin-top: 35px;
		margin-right: 0px;
	}
	.copyright{
		font-size: 12pt;
	}

	.ir-arriba img{
		height: 50px;
		padding-right: 0;
	}
}