<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Paso en falso | Salsa-Art</title>
<style>
:root {
--primary: #e63946;
--secondary: #ffb703;
--dark: #1d1e2c;
--light: #f8f9fa;
--muted: #6c757d;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--light);
color: var(--dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
text-align: center;
}

.container {
max-width: 600px;
padding: 40px 30px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.logo {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 24px;
}

.error-code {
font-size: 6rem;
font-weight: 900;
line-height: 1;
color: var(--primary);
text-shadow: 3px 3px 0px var(--secondary);
margin-bottom: 10px;
}

h1 {
font-size: 1.75rem;
margin-bottom: 12px;
color: var(--dark);
}

p {
font-size: 1rem;
color: var(--muted);
line-height: 1.6;
margin-bottom: 28px;
}

.actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}

.btn {
display: inline-block;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease-in-out;
}

.btn-primary {
background-color: var(--primary);
color: #ffffff;
}

.btn-primary:hover {
background-color: #c92a37;
transform: translateY(-2px);
}

.btn-secondary {
background-color: transparent;
color: var(--dark);
border: 2px solid #e9ecef;
}

.btn-secondary:hover {
background-color: #e9ecef;
}

footer {
margin-top: 30px;
font-size: 0.85rem;
color: var(--muted);
}
</style>
</head>
<body>

<div class="container">
<div class="logo">Salsa-Art.com</div>
<div class="error-code">404</div>
<h1>¡Vaya, dimos un paso en falso!</h1>
<p>
La página o la obra que estás buscando no está en la pista. Es posible que haya cambiado de ritmo, de enlace o que ya no esté disponible.
</p>

<div class="actions">
<a href="/" class="btn btn-primary">Volver al inicio</a>
<a href="/contacto" class="btn btn-secondary">Contactar soporte</a>
</div>
</div>

<footer>
&copy; Salsa-Art. Todos los derechos reservados.
</footer>

</body>
</html>