* {
			padding: 0px;
			margin: 0px;
		}

		.nav li a {
			background-color: linear-gradient(180deg, #f8f8f8 0%, #cfd8dc 60%, #b0b6b8 100%);
			color: #130436;
			text-decoration: none;
			padding: 10px 20px;
			display: block;
			text-shadow: 5px 5px 5px #4b566a;		
		}

		.nav li a:hover {
			background-color: #c0bfc2;
			
		}

		.nav > li {
			float: left;
			background: linear-gradient(180deg, #f8f8f8 0%, #cfd8dc 60%, #b0b6b8 100%);
		}

		div {
			padding: 20px;
			margin: 50px 0px 0px;
		}

		header {
			background: linear-gradient(180deg, #f8f8f8 0%, #cfd8dc 60%, #b0b6b8 100%);
			margin: 0px auto;
			width: 100%;
			max-width: 2000px;
			font-family: Arial, Helvetica, sans-serif, ;
			overflow: 10px;
			padding: 0px 0px 0px 50px;
		}

		ul {
			list-style: none;
			}		

		.nav li ul {
			display: none;
			position: absolute;
			min-width: 150px;
			background: linear-gradient(180deg, #f8f8f8 0%, #cfd8dc 60%, #b0b6b8 100%);
		}

		.nav li:hover > ul {
            display:block;
		}

		h1 {
			text-align: center;
			text-shadow: 5px 5px 5px #96a5c0;
			margin: 10px;
			font-size: 50px;
		}

		h2 {
			font-size: 20px;
			text-shadow: 5px 5px 5px #96a5c0;
		}

		footer {
			background: linear-gradient(180deg, #f8f8f8 0%, #cfd8dc 60%, #b0b6b8 100%);
			color: #130436 ;
			padding: 10px 0px;
			text-align: center;
		}

		#botton:hover {
			cursor: pointer;
		}

		ul, ol {
			list-style:none;
			}

		.primero {
			text-align: justify;
			margin: 150px 250px 30px 50px; /* el primer px es para el margen superior, el segundo es para el ancho del parrafo, el tercero para margen inferior y el cuarto para el margen a la izquierda*/
		}	

		.segundo {
			position:fixed;
			top: 250px;
			right: 30px;
			width: 200px; /* Ajusta según necesites */
			height: 100px;
			background: #ffffff; /* Para verlo */
			z-index: 1000;	
		}

		.tercero {
			position:absolute; /* Este es para que se quede quieto aunque haga scroll*/
			text-align: justify;
			top: 200px; /*Este es para bajar o subir*/
			right: 25px; /*Este es para alinear derecho o izquierda*/
			width: 220px; /* Este es para el tamaño hacia la izquierda */
			height: 900px; /*Este es para el tamaño hacia abajo*/
			background: #f0f0f0; /* Este es el color de fondo*/
			z-index: 1000;
		}

		.cuarto {
			text-align: justify;
			position: absolute;
			top: 200px; /*Este es para alinear a la derecho o izuqierda*/
			right: 20px; /*Este es para alinear arriba abajo o al centro*/
			width: 700px; /* Este es para el tamaño hacia la izquierda */
			height: 300px; /*Este es para el tamaño hacia abajo*/
			background: #f0f0f0; /* Este es el color de fondo*/
			z-index: 1000;
		}

		.logotipo {
			position: absolute;
			left: 0px;
			top: -50px
		}


		/*Este es para la imagen que sale al principio*/
		.modal-overlay {
			position: fixed;        /* importante */
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.7);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;          /* muy por encima del resto */
			opacity: 0;
			visibility: hidden;
			transition: all 0.4s ease;
		}

			.modal-overlay.mostrar {
			opacity: 1;
			visibility: visible;
		}
			.modal-contenido {
			position: relative;   /* crea contexto interno */
			background: white;
			border-radius: 10px;
			padding: 20px;
			max-width: 1000px;
			width: 90%;
			text-align: center;
			z-index: 1000;       /* opcional, por encima del overlay */
		}

			.modal-imagen {
			max-width: 70vw;   /* máximo 80% del ancho de la ventana */
			max-height: 70vh;  /* máximo 80% de la altura de la ventana */
			width: auto;
			height: auto;
			border-radius: 10px;
		}

		.imagen-click {
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 8px;
}

.imagen-click:hover {
    transform: scale(1.02);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
}

.modal-contenido {
    position: relative;
    margin: auto;
    padding: 20px;
    max-width: 95%;
    max-height: 95%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.modal-imagen {
    max-width: 100%;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantiene proporciones SIN distorsión */
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(255,255,255,0.3);
}

.cerrar {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.cerrar:hover {
    color: #ccc;
}