/* 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/fotofondo.jpg"); 
}

.logorespo {
  display: none;
  }

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

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

/* INICIO DE ZONA DEL LOGO, BUSQUEDA Y TIENDA */
.izq {
	width:20%;
	text-align:center;
}

.logo {
	width:100%;
	text-align:center;
}

.logo img {
	width:40%;
	text-align:center;
}

.buscar {
	width:100%;
	text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; /* Espacio adicional entre el logo y el formulario de búsqueda */
}

.busqueda {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; /* Espacio adicional entre el logo y el formulario de búsqueda */
}

.busqueda-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #43A0B2;
    border-radius: 3px;
    padding: 2px;
    width: 98%;
}

.busqueda-input {
    flex-grow: 1;
    padding: 2px;
    border-radius: 3px;
    border: none;
    margin-right: 2px;
}

.busqueda-input:focus {
    outline: none;
    box-shadow: 0 0 5px #43A0B2;
}
.busqueda-boton {
    background-image: url('../newimag/lupa.png');
    background-size: cover;
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    width: 16px;
    height: 14px;
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
}

#bannerRotativo {
    position: relative;
	left: 10px;
	right: 10px;
    width: 90%; /* Ancho del banner */
	padding-bottom: 30px; /* Espacio extra para los puntos */
    overflow: hidden; 
    align-items: center;
}

#bannerRotativo img {
    position: absolute;
    top: 10;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1; /* Agrega un índice Z para que las imágenes estén por encima de otros elementos */
}

#bannerRotativo img.active {
    opacity: 1; /* Cambia la opacidad a 1 para la imagen activa */
    z-index: 2; /* Asegúrate de que la imagen activa esté por encima de las demás */

}

.navegacion-banner {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    border: none;
    cursor: pointer;
    padding: 2px;
    font-size: 10x;
    z-index: 100;
}

#anterior {
    left: 5px;
}

#siguiente {
    right: 5px;
}

#bannerRotativo:hover .navegacion-banner {
    visibility: visible;
}

.puntos-navegacion {
    position: absolute;
    bottom: 10px; /* Posiciona los puntos en la parte inferior del banner */
    left: 0;
    width: 100%;
    text-align: center;
}

.punto {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: white; /* Color claro para contraste */
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.punto.activo {
    background-color: #70BE44 /*  #ff4500;  Color llamativo para el punto activo */
}

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

.titulo-blog {
  background-color: #43A0B2;
  color: white;
  padding: 2px; /* Añade algo de espacio alrededor del texto */
  margin-top: 5px;
  text-align: center;
  width: 98%;
  border-top-left-radius: 10px; /* Redondea la esquina superior izquierda */
  border-top-right-radius: 10px; /* Redondea la esquina superior derecha */
}


.articulos {
	width:90%;
	text-align:center;
	margin-bottom: 2px; 
}

.articulos img {
	width:80%;
	text-align:center;
	cursor: pointer;
}

.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 */
}

/* INICIO DE ZONA DEL PORTAL DE SUSCRIPTORES */
.der {
	display: flex;
	flex-direction: column;
	width:100%;
	text-align:center;
	align-items: center; /* Ajuste para alinear la imagen en la parte superior */
	justify-content: top;
/*  height: auto; */
	width: 20%;
	padding: 1%; /* Ajusta este valor según tus necesidades */
}

.historia {
	width:100%;
	text-align:center;
	margin-bottom: 2px; 
	padding:3px;
}
 
.titulo-portal {
  background-color: #43A0B2;
  color: white;
  padding: 2px; /* Añade algo de espacio alrededor del texto */
  margin-top: 5px;
  text-align: center;
  width: 98%;
  border-top-left-radius: 10px; /* Redondea la esquina superior izquierda */
  border-top-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 */
}

#imgleg {
   width: 100%; /* Ajusta el ancho de la imagen a tu gusto */
   height: 40%; /* Ajusta el alto de la imagen a tu gusto */
  background: url('../newimag/infolegal.png')  no-repeat center center;

}  
#imgleg:hover {
    background: url('../newimag/infolegal2.png')  no-repeat center center;
	cursor: pointer;
}

.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:focus {
  border-bottom: 1px solid;
  /* background: #bae498; */
}

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

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

	.superior {
	  display: none;
	  }

	.izq {
	  display: none;
	  }

	.logoweb {
	  display: none;
	  }

	.logorespo {
	  display: block;
	  }

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

	.titulo-blog {
	  background-color: #43A0B2;
	  color: white;
	  padding: 2px; /* Añade algo de espacio alrededor del texto */
	  margin-top: 5px;
	  text-align: center;
	  width: 90%;
	  border-top-left-radius: 10px; /* Redondea la esquina superior izquierda */
	  border-top-right-radius: 10px; /* Redondea la esquina superior derecha */
	}

	.articulos {
		width:90%;
		text-align:center;
		margin-bottom: 2px; 
	}

	.articulos img {
		width:80%;
		text-align:center;
		cursor: pointer;
	}
	
	.bannerRotativo {
	  display: none;
	  }

	.puntos-navegacion {
	  display: none;
	  }

	.navegacion-banner {
	  display: none;
	  }

	.der {
	  display: none;
	  }

	.dilog {
	  display: none;
	  }

	.dider {
	  display: none;
	  }

	.logores, .graphicsres {
		flex: 1;
		text-align: center;
		padding: 1em;
	}

	.logores img, .graphicsres img {
		max-width: 80%;
		height: auto;
	}

	.suscriptores {
		display: flex;
		justify-content: space-around;
		padding: 1em;
	}

	.image-container {
		flex: 1;
		text-align: center;
		vertical-align: center;
	}

	.image-container img {
		max-width: 96%;
		height: auto;
	}

	.busqueda {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 0px; /* Espacio adicional entre el logo y el formulario de búsqueda */
	}

	.busqueda-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #43A0B2;
		border-radius: 3px;
		padding: 5px;
		width: 98%;
	}

	.busqueda-input {
		flex-grow: 1;
		padding: 5px;
		border-radius: 3px;
		border: none;
		margin-right: 5px;
	}

	.busqueda-input:focus {
		outline: none;
		box-shadow: 0 0 5px #43A0B2;
	}
	.busqueda-boton {
		background-image: url('../newimag/lupa.png');
		background-size: cover;
		border: none;
		border-radius: 5px; /* Bordes redondeados */
		width: 16px;
		height: 14px;
		cursor: pointer; /* Cambia el cursor al pasar el ratón */
	}

	.pie {
		display:none;		
	}

	.historiares {
		display:block;	
		width:90%;
	}

	.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;
	}

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

  }