@charset "utf-8";
/* CSS Document */
/* Estilos para la línea superior fija */
.linea_superior {
    background-color: #d4af37;
    padding: 50px 0;
    width: 100%;
    position: fixed; /* Fija el elemento en la ventana del navegador */
    top: 0; /* Lo pega a la parte superior */
    z-index: 2; /* Asegura que esté por encima de otros elementos */
}

.logo_alcaldia {
    position: fixed; /* Mantiene el logo fijo */
    left: 20px; /* Lo pega a la izquierda */
    z-index: 3; /* Asegura que esté por encima de la línea superior */
    transform-origin: top left; /* Define el punto de origen para la escala */
}

.logo {
    height: auto; /* Mantiene la proporción */
    transform-origin: top left; /* Asegura que la escala se aplique desde la esquina superior izquierda */
    transition: transform 0.3s ease-in-out; /* Animación suave para futuros efectos */
}

/* Estilos por defecto para pantallas grandes (y se ajustarán en Media Queries) */
.logo_alcaldia {
    top: 10px; /* Posición inicial desde la parte superior para pantallas grandes */
}

.logo {
    transform: scale(0.3); /* Escala inicial para pantallas grandes (ajusta este valor) */
    max-width: none; /* Elimina el max-width inicial para que la escala tenga efecto */
}

/* Estilos por defecto para pantallas grandes */
@media (min-width: 992px) {
    .logo_alcaldia {
        top: 10px;
    }
    .logo {
        transform: scale(0.12); /* Reduce el logo al 30% de su tamaño original */
        max-width: none;
    }
}

/* Media query para pantallas pequeñas (hasta 767px) */
@media (max-width: 767px) {
    .logo_alcaldia {
        top: 5px;
        left: 10px;
    }
    .logo {
        transform: scale(0.2); /* Reduce el logo al 20% en pantallas pequeñas */
        max-width: none;
    }
}

/* Media query para pantallas medianas (desde 768px hasta 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .logo_alcaldia {
        top: 8px;
    }
    .logo {
        transform: scale(0.25); /* Reduce el logo al 25% en pantallas medianas */
        max-width: none;
    }

}

/* Estilos para el encabezado centrado */
.Encabezado {
    background-color: transparent; /* Fondo transparente */
    color: #333;
    text-align: center;
    padding: 20px;
    font-size: 1.8em; /* Tamaño de fuente un poco mayor */
    font-family: 'Gotham Bold', sans-serif; /* Aplica la tipografía Gotham Bold (asegúrate de tenerla disponible o usar una similar) */
    font-weight: bold;
    margin-bottom: 20px;
    position: sticky; /* Se pega al hacer scroll dentro de su contenedor */
    top: 0;
    z-index: 3; /* Asegura que esté debajo del logo y la línea superior */
}

/* Estilos para la lista flotante con fondo transparente y bordes difuminados */
.Lista.de.flotantez {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo blanco semitransparente */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra suave para el difuminado */
    margin-top: 20px; /* Espacio para no quedar debajo de la línea superior y el logo */
    width: 20%; /* Establece el ancho al 80% de su contenedor padre */
    /* También puedes usar valores fijos como: width: 500px; */
    height: auto; /* La altura se ajustará automáticamente al contenido */
    /* Si quieres una altura fija: height: 300px; */
    margin-left: 0px; /* Centra la caja horizontalmente si tiene un ancho menor al 100% */
    margin-right: auto; /* Centra la caja horizontalmente si tiene un ancho menor al 100% */
}

.Lista.de.flotantez ol {
    list-style-type: none; /* Elimina los números de la lista */
    padding-left: 0; /* Elimina el padding izquierdo predeterminado de la lista */
}

.Lista.de.flotantez li {
    margin-bottom: 5px;
}

.Lista.de.flotantez li a {
    text-decoration: none;
    color: #007bff;
    font-family: 'Roboto Bold Condensed', sans-serif; /* Aplica la tipografía Roboto Bold Condensed (asegúrate de tenerla disponible) */
    font-weight: bold;
}

.Lista.de.flotantez li:not(:has(a)) { /* Selecciona los elementos li que no contienen un enlace (<a>) */
    font-family: 'Roboto Black', sans-serif; /* Aplica la tipografía Roboto Black (asegúrate de tenerla disponible) */
    font-weight: 900; /* Equivalente a Black */
    color: #333; /* Color de texto diferente si no hay enlace */
}

.JUD{
    /* Posicionamiento usando márgenes (puedes ajustar los valores) */
    margin-top: -168px; /* Espacio desde arriba */
    margin-left: auto; /* Intenta moverlo a la derecha */
    margin-right: 200px; /* Espacio desde la derecha */
    display: block; /* Para que los márgenes horizontales funcionen correctamente */

    /* Escala (ajusta el valor según necesites) */
    transform: scale(1.2); /* Reduce la imagen al 80% */
    transform-origin: center center; /* Escala desde el centro */
}

.Contenedor_de_nombre {
    background-color: #d4af37; /* Color de fondo del rectángulo */
    border: 1px solid #ccc; /* Borde del rectángulo (opcional) */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espacio dentro del rectángulo */
    margin-top: -120px; /* Espacio desde el elemento anterior */
    text-align: center; /* Centra el texto dentro del rectángulo */
    width: fit-content; /* Ajusta el ancho al contenido */
    margin-left: auto; /* Centra el rectángulo horizontalmente */
    margin-right: 600px; /* Centra el rectángulo horizontalmente */
	
}

.Nombre {
    font-weight: bold;
	color: white;
	font-family: 'Roboto Black', sans-serif; /* Aplica la tipografía Roboto Black (asegúrate de tenerla disponible) */
    margin-bottom: 0; /* Elimina el margen inferior predeterminado del nombre */
}

.leyenda {
	margin-top: 105px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 12px;
}


.linea_inferior {
    width: 100%;
    height: 6px;
    background: #d4af37;
    position: fixed;
    bottom: 40px;
    left: 0;
}

/* Estilos para pantallas grandes (desde 992px en adelante) - Estos son los estilos base */
@media (min-width: 992px) {
    .logo.alcaldia img {
        max-width: 150px; /* Logo más grande en desktops */
    }

    .Encabezado {
        font-size: 1.5em; /* Encabezado más grande en desktops */
        padding: 20px;
    }

    /* Aquí podrías añadir estilos específicos para pantallas grandes si lo necesitas */
}