body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background-color: #e9ecef; /* Fondo más suave */ color: #343a40; /* Color de texto más oscuro para mayor contraste */ display: flex; justify-content: center; align-items: center; min-height: 100vh; } #info { background-color: #ffffff; /* Fondo blanco para el contenedor */ padding: 2rem 3rem; border-radius: 16px; /* Bordes más redondeados */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Sombra más suave y sutil */ max-width: 650px; /* Un poco más grande */ width: 90%; transition: all 0.3s ease; /* Suaviza las transiciones en el contenido */ } #info h2 { margin-top: 0; font-size: 2.2em; /* Un tamaño ligeramente mayor */ font-weight: bold; /* Hacer el título más destacado */ color: #0078D7; /* Color de título moderno y vibrante */ text-transform: uppercase; /* Título en mayúsculas */ letter-spacing: 1px; /* Espaciado de letras */ } #info p { margin: 0.8em 0; line-height: 1.6; /* Mejor espaciado entre líneas */ font-size: 1.1em; /* Texto un poco más grande para facilitar la lectura */ } #info strong { color: #495057; /* Color ligeramente más oscuro para el texto destacado */ font-weight: 600; /* Resaltar el texto */ } #info a { color: #0078D7; /* Color vibrante de enlaces */ text-decoration: none; font-weight: 500; /* Peso de la fuente de los enlaces */ transition: color 0.3s ease; /* Suaviza el cambio de color al pasar el cursor */ } #info a:hover { text-decoration: underline; color: #0056b3; /* Color al pasar el cursor */ } .mensaje-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; justify-content: center; align-items: center; } button { background-color: #0078D7; color: white; border: none; padding: 10px 20px; font-size: 1.1em; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } button:hover { background-color: #0056b3; transform: translateY(-2px); /* Efecto sutil al hacer hover */ } button:active { transform: translateY(1px); /* Efecto al hacer clic */ }