/* Estilos generales */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: white;
}

a {
	outline: none;
	text-decoration: none;
	padding: 2px 1px 0;
}

a:link {
	color: cyan;
}

a:visited {
	color: cyan; /* #437a16; */
	text-decoration: none;
}

/*
a:focus {
  border-bottom: 1px solid; */
  /* background: #bae498; */
/* } */ 

a:hover {
  /* border-bottom: 1px solid; */
  font-weight:bold;
  color: white;
  /* background: #cdfeaa; */
}

a:active {
  background: #265301;
  color: navy;
}


.containerweb {
  width: 100%;
  overflow-x: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-image: url("../newimag/fondoq.jpg"); 
}

.logorespo {
  display: none;
  }

.superior {
	width:100%;
	height:1px;
}

.cuerpo {
	display: flex;
	flex-direction: row;
	width:100%;
	text-align:center;
}

/* INICIO DE ZONA DEL LOGO, BUSQUEDA Y TIENDA */
.izq {
	width:25%;
	margin-left: 10px;
	margin-right: 0;
}

.izqqq {
	  display: none;
	  }

.censupqqq {
	  display: none;
	  }

.logo {
	width:100%;
	margin-left: auto;
	margin-right: 0;
}

.logo img {
	width:100%;
}

/* INICIO DE ZONA DEL BLOG */
.cen {
	display: flex;
	flex-direction: column;
	align-items: left; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
	width:70%;
	text-align:left;
}

.censup {
/*	display: flex;
	flex-direction: column; */
	align-items: top; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
	width:80%;
	text-align:left;
	font-family: 'Roboto', sans-serif;
/* 	font-size: 3vw;  Ajuste para interlineado vertical */
}

.ceninf {
	display: flex;
	flex-direction: row;
	align-items: top; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
	width:80%;
	text-align:left;
}

.cenizq {
/*	display: flex;
	flex-direction: column; */
	align-items: top; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
	padding-right: 10px;
	width:50%;
	text-align:left;
	font-family: 'Roboto', sans-serif;
}

.cender {
	border-left: 1px solid;
	padding-left: 10px;
/*	display: flex;
	flex-direction: column; */
	align-items: top; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
	width:50%;
	text-align:left;
	font-family: 'Roboto', sans-serif;
}

.fondoblog {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 90%;
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom-left-radius: 10px; /* Redondea la esquina superior izquierda */
  border-bottom-right-radius: 10px; /* Redondea la esquina superior derecha */
}

.fondo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 90%;
  background-color: rgba(255, 255, 255, 0.15);
  border-bottom-left-radius: 10px; /* Redondea la esquina superior izquierda */
  border-bottom-right-radius: 10px; /* Redondea la esquina superior derecha */
}

.der img {
	width: 70%;
	max-width: 70%;
	vertical-align: top;
}

.pie {
	display: flex;
	flex-direction: row;
	align-items: top; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
	width:100%;
	background-color:#43A0B2;
	text-align:center;
	padding: 5px;
}

.dilog {
	width:20%;
	text-align:center;
}

.dilog img {
	width:70%;
	text-align:center;
}

.disom {
	width:30%;
	text-align:left;
	color: white;
}

.dicon {
	width:30%;
	text-align:left;
	color: white;
}

.disoc {
	width:30%;
	text-align:center;
	color: white;
	justify-content: center;
}

.dired {
	width:100%;
	text-align:center;
	justify-content: center;
	display: flex;
	flex-direction: row;
}

.dir1 {
	width:60%;
	text-align:center;
	justify-content: center;
}


.dir1 img {
	width:36%;
	text-align:center;
}

.dider {
	margin: 5px;
	padding: 5px;
	font-family: 'Roboto', sans-serif;	
	width:20%;
	text-align:center;
	color: white;
	justify-content: center;
}

.footerr {
  display: none;
  }

.historiares {
	display:none;		
}



/* todo esto se va a programar como página única para celular 
lo importante son respetar las classes container containerweb y containerreponsive
para que sepa cual estilo utilizar
el resto hay que programarlo desde cero*/  

@media (max-width: 768px) {

	.containerweb {
	  display: block;
      overflow: scroll; 
		background-image: url("../newimag/fotofondor.jpg");
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
	/*	background-color: black; */
	  }
	a:link {
		color: #BAD9E4;
	}

	a:visited {
		color: cyan; /* #437a16; */
	}

	a:hover {
	  /* border-bottom: 1px solid; */
	  font-weight:bold;
	  color: black;
	  /* background: #cdfeaa; */
	}

	.cuerpo {
		display: flex;
		flex-direction: column;
		width:100%;
		text-align:center;
	}

	.superior {
		display:none;
	}

	.pie {
	  display: none;
	  }

	.izq {
	  display: none;
	  }

	.izqqq {
		width:100%;
		display: block;
	  }

	.logoqqq {
		width:100%;
		margin-left: auto;
		margin-right: 0;
	}

	.logoqqq img {
		width:50%;
	}

	.logoweb {
	  display: none;
	  }

	.cen {
		display: flex;
		flex-direction: column;
		align-items: left; /* Ajuste para alinear la imagen en la parte superior */
		justify-content: top;
		width:96%;
		text-align:left;
	}

	.censup {
		display: none;
	  }

	.censupqqq {
		display:block;
		align-items: top; /* Ajuste para alinear la imagen en la parte superior */
		justify-content: top;
		width:90%;
		padding-left: 10px;
		padding-right: 5px;
		text-align:left;
	}

	.ceninf {
		display: flex;
		flex-direction: column;
		align-items: top; /* Ajuste para alinear la imagen en la parte superior */
		justify-content: top;
		width:96%;
		text-align:left;
	}

	.cenizq {
		align-items: top; /* Ajuste para alinear la imagen en la parte superior */
		justify-content: top;
		width:90%;
		padding-left: 10px;
		padding-right: 5px;
		text-align:left;
	}

	.cender {
		border-left: 0px;
		align-items: top; /* Ajuste para alinear la imagen en la parte superior */
		justify-content: top;
		width:90%;
		padding-left: 10px;
		padding-right: 5px;
		text-align:left;
	}

	.footerr {
		display: block;
		background-color: #43A0B2;
		color: white;
		text-align: center;
		padding: 1em;
		font-family: 'Roboto', sans-serif;
		font-size: 13px;		
	}

	.social-icons {
		display: flex;
		justify-content: center;
		gap: 1em;
	}

	.social-icons img {
		max-width: 300px; /* Ajusta el tamaño de los íconos de las redes sociales */
		height: auto;
		font-size: 18px;	
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.privacy {
		margin-top: 1em;
	}

  }