<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CharlotMed - En construcción</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; background: #ffffff; display: flex; align-items: center; justify-content: center; }
.container { width: 100%; max-width: 500px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.logo-img { width: 250px; height: 250px; object-fit: contain; }
.title { font-size: 26px; font-weight: 600; color: #64748b; letter-spacing: -0.01em; }
.contact-box { width: 100%; padding: 20px; background: white; border-radius: 8px; border: 2px solid #000000; }
.contact-number { display: flex; align-items: center; justify-content: center; gap: 16px; }
.phone-number { font-size: 18px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
.copy-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; transition: all 0.2s; color: #000000; flex-shrink: 0; }
.copy-btn:hover { transform: scale(1.1); }
.copy-btn svg { width: 24px; height: 24px; stroke-width: 2; }
@media (max-width: 480px) { .logo-img { width: 100px; height: 100px; } .title { font-size: 16px; } .phone-number { font-size: 26px; } }
</style>
</head>
<body>
<div class="container">
<img src="https://firebasestorage.googleapis.com/v0/b/app-cleaning-9c173.firebasestorage.app/o/Logo%2FMesa%20de%20trabajo%201%400.75x.png?alt=media&token=b759a0c3-0587-4356-83bf-7cdd4fccc97d" alt="CharlotMed" class="logo-img">
<h1 class="title">En construcción, proximamente reservas de limpieza en linea.</h1>
<div class="contact-box">
<div class="contact-number">
<div class="phone-number">603 20 59 88</div>
<button class="copy-btn" onclick="copiarNumero()" title="Copiar número">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
</button>
</div>
</div>
</div>
<script>
function copiarNumero() {
const numero = '603 20 59 88';
navigator.clipboard.writeText(numero).then(() => {
alert('Número copiado');
}).catch(() => {
alert('Error al copiar');
});
}
</script>
</body>
</html>