@charset "utf-8";
/* CSS Document */

/* Línea superior */
.Linea_superior {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Que cubra todo el ancho */
    height: 150px; /* Grosor de la línea */
    background-color: #9f2149; /* Color de la línea */
    z-index: 2; /* Nivel debajo de la imagen */
}

.h2{
	position: absolute; /* Posiciona el texto encima de la línea */
    top: 60px; /* Comienza en la parte superior del contenedor */
    left: 50%; /* Centra horizontalmente */
	 transform: translateX(-50%); /* Ajusta el centro exacto */
	text-align: center; /* Centra el texto */
	color: white; /* Cambia el color del texto si es necesario */
	 z-index: 2; /* Aparece detrás del texto pero delante de la barra */
	
}
h2 {
  font-size: 30px; /* Tamaño del texto secundario */
  color: #FFFFFF; /* Color dorado */
  margin: 1px; /* Elimina márgenes adicionales */
  padding: 20px; /* Espaciado alrededor del texto */
}

.text-overlay {
  position: absolute; /* Posiciona el texto encima de la línea */
  top: 0; /* Comienza en la parte superior del contenedor */
  left: 50%; /* Centra horizontalmente */
  transform: translateX(-50%); /* Ajusta el centro exacto */
  text-align: center; /* Centra el texto */
  color: white; /* Cambia el color del texto si es necesario */
	 z-index: 2; /* Aparece detrás del texto pero delante de la barra */
}
h1 {
  font-size: 70px; /* Tamaño del texto principal */
  color: #ffffff; /* Color blanco */
  margin: 0; /* Elimina márgenes adicionales */
  padding: 10px; /* Espaciado alrededor del texto */
}


/* Archivo: estilos.css */
body {
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina padding */
    background-image: url('Imagenes/Fondo.png'); /* Cambia por la ruta de tu imagen */
    background-size: cover; /* Hace que la imagen cubra todo el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen */
    height: 100vh; /* Altura del 100% de la ventana */
    width: 100vw; /* Ancho del 100% de la ventana */
}

/* Imagen en la parte superior derecha */
.Logo_derecha {
    position: fixed;
    top: -30px; /* Espaciado desde la parte superior */
    right: -300px; /* Espaciado desde el borde derecho */
    z-index: 10; /* Mayor que la línea para estar encima */
    max-width: 150px; /* Opcional: limitar el tamaño */
    height: auto; /* Mantener la proporción */
}

/* Imagen en la parte superior izquierda */
.Logo_izquierda {
    position: fixed;
    top: -30px; /* Espaciado desde la parte superior */
    left: -300px; /* Espaciado desde el borde derecho */
    z-index: 2; /* Mayor que la línea para estar encima */
    max-width: 150px; /* Opcional: limitar el tamaño */
    height: auto; /* Mantener la proporción */
}
.rectangulo-blanco {
  width: 500px; /* Ancho del rectángulo */
  height: 800px; /* Altura del rectángulo */
  background: rgba(255, 255, 255, 0.5); /* Color blanco con transparencia del 50% */
  border-radius: 15px; /* Bordes suavizados */
  position: absolute; /* Posicionamiento absoluto */
  top: 50%; /* Posiciona en el centro vertical del contenedor/página */
  left: 0; /* Posiciona el rectángulo en la parte izquierda */
  transform: translateY(-50%); /* Centra el rectángulo verticalmente */
margin: 10px auto 0; /* Espaciado hacia abajo con respecto a la línea */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
	 z-index: 1; /* Aparece detrás del texto pero delante de la barra */
 }

.Lista {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #000;
  position: absolute; /* Para mover la lista */
  top: 120px; /* Ajusta la posición verticalmente */
  left: -420px; /* Ajusta la posición horizontalmente */
  font-family: 'Roboto', sans-serif;
}

.Lista li {
  margin: 8px 0; /* Espaciado entre los elementos de la lista */
}

.Geo {
  position: relative; /* Permite posicionar la imagen dentro de este contenedor */
  width: 100%; /* Ancho del contenedor */
  height: 400px; /* Altura del contenedor */
  border: 1px solid #ccc; /* Borde para referencia */
}

.JUD {
  position: absolute; /* Permite mover la imagen libremente */
  top: 200px; /* Mueve la imagen hacia abajo 50px desde el borde superior */
  right: 80px; /* Mueve la imagen hacia la derecha 30px desde el borde izquierdo */
  width: 600px; /* Ajusta el ancho de la imagen */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Sombra para efecto 3D */
}