/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #dfe3ee;
  color: #181818;
  font-family: 'Comic Sans MS', Arial, sans-serif;
  text-align: center;
}

#cabecera_principal{
  background: #8b9dc3;
  border: 2px solid #3b5998;
  padding: 30px;
  text-align: center;
}

#grupo_principal{  
  width: 1000px;
  margin: 5px auto;
  text-align: left;
}

#enlaces{
  background: #a2c4c9;
  margin: 1px;
  text-align: left;
  
  border: 2px solid #3b5998;
}

#seccion_principal{
  background: #708090;
  width: 980;
  margin: 10px auto;
  padding: 10px;
  text-align: left;
  
  border-top: 2px solid #3b5998;
  border-bottom: 2px solid #3b5998;
}

#piegeneral{
  background: #a2c4c9;
  border-top: 2px solid #3b5998;
  padding: 30px;
  text-align: center;

}

.articulos{
  display: inline-block;
  
  vertical-align: top;
  text-align: justify;
  width: 800px;
  margin: 0px auto;
  padding: 10px;
}

.articulo{
  display: inline-block;
  
  vertical-align: top;
  text-align: justify;
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  
  border: 2px solid #3b5998;
}

.lateral{
  display: inline-block;
  
  vertical-align: top;
  text-align: justify;
  
  background: #7f7f7f;
  width: 130px;
  margin: 0px auto;
  padding: 10px;
  
  border-radius: 20px;
  border: 2px solid #543e41;
}

.cabecera{
  background:  #dfe3ee;
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  vertical-align: top;
  text-align: center;
}

.cuerpo{
  background:  #8fb5d8;
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  vertical-align: top;
  text-align: center;
}

.pie{
  background:  #dfe3ee;
  width: 100%;
  margin: 0px auto;
  padding: 0px;
  vertical-align: top;
  text-align: center;
}

.cabecera_entrada{
  position: relative; /* Posiciona el contenedor de forma relativa */
  width: 80%; /* O el ancho que necesites */
  height: 400px; /* O la altura que necesites */
  overflow: hidden; /* Para asegurar que la imagen no se salga */
  

  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%,  0%); /* Ajusta el centro con precisión */
  
  border: 10px solid #3b5998;
}

.imagen_cabecera {
  width: 100%; /* Asegura que la imagen ocupe todo el ancho */
  height: 100%; /* Asegura que la imagen ocupe toda la altura */
  object-fit: cover; /* Ajusta la imagen para que cubra el contenedor */
}

.overlay_titulo {
  position: absolute; /* Posiciona el texto de manera absoluta */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta el centro con precisión */
  color: white; /* Color del texto */
  text-align: center; /* Alinea el texto al centro */
  z-index: 1; /* Asegura que el texto esté encima de la imagen */
  
  border: 10px solid #3b5998;
}