/* Estilos globales */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 80%;
  /* Ajustado para abarcar el 80% de la pantalla */
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

h3 span {
  color: #fff;
}

#contenedor_banner {
  margin-top: 100px;
  padding: 0px 50px;
  background-image: url("../admin//categorias//images/cabildo 1.jpg");
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

#contenedor_banner::before {
  content: "";
  background: rgba(0, 0, 0, 0.62);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.contenedor_logo_titulo {
  position: absolute;
  top: 50%;
  /* Coloca el punto superior del elemento en el centro vertical */
  left: 50%;
  /* Coloca el punto izquierdo del elemento en el centro horizontal */
  transform: translate(-50%, -50%);
  /* Mueve el elemento hacia arriba y hacia la izquierda en la mitad de su propio tamaño */
  color: white;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
}

.contenedor_logo_titulo img {
  max-width: 200px;
  /* Establece el ancho máximo para el logo (ajusta según tus necesidades) */
  height: auto;
  /* Mantiene la proporción del logo */
  display: block;
  /* Evita espacios en blanco no deseados alrededor del logo */
}

.contenedor_logo_titulo h2 {
  text-shadow: 2px 2px 2px #818181dc;
  text-align: center;
  color: #fcff58;
  font-family: "Helvetica", Sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  max-width: 100%; /* Establece el ancho máximo al 100% del contenedor */
  font-size: 48px;
  word-wrap: break-word; /* Rompe las palabras largas si es necesario */
  text-align: center; /* Alinea el texto al centro */
}

.contenedor_logo_titulo p {
  font-size: 25px;
  font-weight: 400;
  text-align: justify;
  width: 90%;
  line-height: 1.5;
}

.contenedor_logo_titulo h3 span {
  font-size: 25px;
  font-weight: 400;
  text-align: center;
  width: 90%;
  line-height: 1.5;
  text-transform: uppercase;
}

.container p {
  font-size: 20px;
  margin: 0.5em 0 1em 0;
  text-align: justify;
}

/* Estilo para los títulos y párrafos */
.container h2,
h3,
h4 {
  color: #73122d;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.container h2:hover,
.container h3:hover,
.container h4:hover {
  color: #9e1c41;
  cursor: auto;
}

h2 {
  font-size: 28px;
  margin-top: 20px;
}

h3 {
  font-size: 26px;
  margin-top: 15px;
}

h4 {
  font-size: 24px;
  margin-top: 10px;
}

.container p,
.container ul {
  font-size: 20px;
  margin-top: 10px;
  padding: 3px 10px;
  border: #65080852 5px double;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

#Cronohistoria {
  padding-left: 20px;
  font-size: 20px;
  margin: 0.5em 0 1em 0;
  text-align: justify;
}
.referencias {
  padding: 10px;
  border: 1px solid #ccc;
  max-width: 100%; /* Ajusta el ancho máximo al 100% del contenedor principal */
  box-sizing: border-box; /* Incluye el relleno y el borde en el ancho total */
}

.referencias a {
  color: #0066cc;
  text-decoration: none;
  max-width: 100%; /* Ajusta el ancho máximo del enlace al 100% del contenedor de referencias */
  box-sizing: border-box; /* Incluye el relleno y el borde en el ancho total del enlace */
  display: inline-block; /* Convierte el enlace en un bloque en línea para que se ajuste al ancho máximo */
  word-wrap: break-word; /* Rompe las palabras largas para ajustarse al contenedor */
}

.referencias a:hover {
  text-decoration: underline;
}

/*PARA DISPOSITIVO MOVILES*/
@media screen and (max-width: 768px) {
  h3 {
    text-align: center;
  }
  .container {
    max-width: 100%;
  }
}
@media screen and (max-width: 390px) {
  .container p,
  .container ul {
    font-size: 17px;
  }
  #Cronohistoria {
    font-size: 17px;
  }
  .referencias a {
    font-size: 16px;
  }
  .contenedor_logo_titulo img {
    max-width: 130px;
  }
  .contenedor_logo_titulo h3 span {
    font-size: 20px;
  }
  .contenedor_logo_titulo h2 {
    font-size: 43px;
  }
}
@media screen and (max-width: 280px) {
  .contenedor_logo_titulo h2 {
    font-size: 45px;
  }
  .contenedor_logo_titulo {
    width: 83%;
  }
  .contenedor_logo_titulo h2 {
    font-size: 34px;
    width: max-content;
  }
  #languageSelector {
    width: 148px;
  }
}