<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cotizador Oficial | Fotomattica</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #140407;
--card-bg: #1F070B;
--card-inner: #2A0B10;
--burgundy: #6B1728;
--burgundy-border: #4D121D;
--cream: #FAF7F2;
--cream-muted: #D1C7BD;
--border: #3D1017;
--accent-star: #FAF7F2;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background-color: var(--bg); color: var(--cream); padding: 40px 16px; line-height: 1.5; }
.container {
max-width: 650px;
margin: 0 auto;
background: var(--card-bg);
border-radius: 28px;
box-shadow: 0 25px 60px rgba(0,0,0,0.6);
padding: 38px 28px;
border: 1px solid var(--border);
}
header { text-align: center; margin-bottom: 32px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
.star-logo { font-size: 32px; color: var(--accent-star); line-height: 1; margin-bottom: 8px; }
header h1 {
font-family: 'Cinzel', serif;
font-size: 2.2rem;
letter-spacing: 0.2em;
color: var(--cream);
font-weight: 700;
text-transform: uppercase;
}
header p {
color: var(--cream-muted);
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 6px;
}
.section-title {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--cream-muted);
margin-bottom: 12px;
}
.form-group { margin-bottom: 24px; }
.input-field {
width: 100%;
padding: 13px 15px;
background-color: var(--card-inner);
border: 1.5px solid var(--border);
border-radius: 12px;
font-size: 0.92rem;
color: var(--cream);
outline: none;
transition: border 0.2s;
}
.input-field:focus { border-color: var(--cream); }
.input-field::placeholder { color: #8C7B76; }
.grid { display: grid; gap: 12px; margin-bottom: 24px; }
.card-option {
background: var(--card-inner);
border: 1.5px solid var(--border);
border-radius: 16px;
padding: 18px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.card-option:hover { border-color: var(--burgundy); }
.card-option.selected {
border-color: var(--cream);
background: #3B0E17;
}
.card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.card-title { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; }
.card-price { font-size: 1.15rem; font-weight: 800; color: var(--cream); }
.card-desc { font-size: 0.82rem; color: var(--cream-muted); line-height: 1.4; }
.addon-item {
background: var(--card-inner);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.addon-info { font-size: 0.9rem; font-weight: 600; }
.addon-sub { font-size: 0.78rem; color: var(--cream-muted); font-weight: normal; }
.counter-control { display: flex; align-items: center; gap: 12px; }
.counter-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--burgundy);
color: var(--cream);
border: none;
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.counter-btn:hover { background: #8B1F34; }
.counter-value { font-weight: 700; min-width: 20px; text-align: center; }
.summary-card {
background: #120306;
border-radius: 20px;
padding: 22px;
margin-top: 28px;
border: 1px solid var(--border);
}
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.88rem; color: var(--cream-muted); }
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1.5px dashed var(--border);
padding-top: 14px;
margin-top: 12px;
}
.summary-total span:first-child { font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; }
.total-amount { font-size: 1.9rem; font-weight: 800; color: var(--cream); }
.deposit-badge {
display: inline-block;
margin-top: 6px;
font-size: 0.8rem;
color: #F87171;
}
.btn-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: var(--cream);
color: #140407;
border: none;
border-radius: 14px;
padding: 16px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
margin-top: 20px;
text-decoration: none;
transition: background 0.2s;
}
.btn-submit:hover { background: #EAE3D6; }
.terms {
margin-top: 20px;
font-size: 0.75rem;
color: var(--cream-muted);
text-align: center;
line-height: 1.4;
}
#copyNotice {
display: none;
text-align: center;
color: #4ade80;
font-size: 0.82rem;
margin-top: 10px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="star-logo">✦</div>
<h1>Fotomattica</h1>
<p>Servicios 2026</p>
</header>
<div class="form-group">
<div class="section-title">Detalles del Evento</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
<input type="text" id="clientName" class="input-field" placeholder="Tu Nombre completo" required />
<input type="date" id="eventDate" class="input-field" required />
</div>
<input type="text" id="eventLocation" class="input-field" placeholder="Ciudad / Locación o Salón" />
</div>
<div class="section-title">Selecciona tu Experiencia</div>
<div class="grid" id="packagesContainer">
<div class="card-option selected" data-id="estandar" data-name="Experiencia Estándar" data-price="9500" data-deposit="50">
<div class="card-header">
<div class="card-title">Experiencia Estándar</div>
<div class="card-price">$9,500 MXN</div>
</div>
<div class="card-desc">
• 3 horas continuas de servicio<br>
• Impresiones ilimitadas (2 tiras por impresión)<br>
• Diseño 100% personalizado de tiras y pantalla<br>
• Instalación y asistencia durante todo el evento
</div>
</div>
<div class="card-option" data-id="happy-bday" data-name="Experiencia Happy Bday" data-price="3900" data-deposit="60">
<div class="card-header">
<div class="card-title">Experiencia Happy Bday</div>
<div class="card-price">$3,900 MXN</div>
</div>
<div class="card-desc">
• 3 horas continuas con diseño personalizado e instalación<br>
• Pago de tiras a cargo de los invitados ($120 MXN por 2 tiras)
</div>
</div>
</div>
<div class="section-title">Personaliza con Extras</div>
<div class="addon-item">
<div>
<div class="addon-info">Horas Extra Continuas</div>
<div class="addon-sub">$1,000 MXN por cada hora adicional</div>
</div>
<div class="counter-control">
<button class="counter-btn" id="btnMinusHours">-</button>
<span class="counter-value" id="extraHoursCount">0</span>
<button class="counter-btn" id="btnPlusHours">+</button>
</div>
</div>
<div class="addon-item">
<div>
<div class="addon-info">Kilómetros fuera de Zona Metropolitana</div>
<div class="addon-sub">$20 MXN por km adicional</div>
</div>
<div style="width: 90px;">
<input type="number" id="extraKm" class="input-field" placeholder="0 km" min="0" style="padding: 8px 10px; text-align: center;" />
</div>
</div>
<div class="summary-card">
<div class="summary-row">
<span>Experiencia base:</span>
<span id="sumPackage">Experiencia Estándar ($9,500)</span>
</div>
<div class="summary-row">
<span>Horas extra:</span>
<span id="sumHours">0 hrs ($0)</span>
</div>
<div class="summary-row">
<span>Flete foráneo:</span>
<span id="sumKm">$0</span>
</div>
<div class="summary-total">
<div>
<span>Inversión Total</span>
<div class="deposit-badge" id="depositBadge">Anticipo para apartar (50%): $4,750 MXN</div>
</div>
<span class="total-amount" id="totalAmount">$9,500</span>
</div>
</div>
<a href="#" id="actionBtn" class="btn-submit">
✦ Solicitar Disponibilidad
</a>
<div id="copyNotice">✓ ¡Cotización copiada al portapapeles!</div>
<div class="terms">
* Flete incluido en zona metropolitana. Instalación en planta baja incluida.<br>
Requiere piso liso, sin desnivel y espacio techado en exterior.<br>
Contacto: fotomattica@gmail.com
</div>
</div>
<script>
// -------------------------------------------------------------
// CONFIGURACIÓN: Deja en "" si aún no tienes el chip activo.
// Cuando te lo den, ponlo aquí (ej: "524441234567")
// -------------------------------------------------------------
const NUMERO_WHATSAPP = "";
const CORREO_CONTACTO = "fotomattica@gmail.com";
let selectedPackage = { name: "Experiencia Estándar", price: 9500, depositPercent: 50 };
let extraHours = 0;
let extraKm = 0;
let latestMessage = "";
document.querySelectorAll('#packagesContainer .card-option').forEach(card => {
card.addEventListener('click', () => {
document.querySelectorAll('#packagesContainer .card-option').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
selectedPackage = {
name: card.dataset.name,
price: parseFloat(card.dataset.price),
depositPercent: parseInt(card.dataset.deposit)
};
updateAll();
});
});
document.getElementById('btnMinusHours').addEventListener('click', () => {
if (extraHours > 0) {
extraHours--;
document.getElementById('extraHoursCount').textContent = extraHours;
updateAll();
}
});
document.getElementById('btnPlusHours').addEventListener('click', () => {
extraHours++;
document.getElementById('extraHoursCount').textContent = extraHours;
updateAll();
});
document.getElementById('extraKm').addEventListener('input', (e) => {
extraKm = Math.max(0, parseInt(e.target.value) || 0);
updateAll();
});
function updateAll() {
const hoursCost = extraHours * 1000;
const kmCost = extraKm * 20;
const grandTotal = selectedPackage.price + hoursCost + kmCost;
const depositRequired = (grandTotal * (selectedPackage.depositPercent / 100));
document.getElementById('sumPackage').textContent = `${selectedPackage.name} ($${selectedPackage.price.toLocaleString('es-MX')})`;
document.getElementById('sumHours').textContent = `${extraHours} hrs ($${hoursCost.toLocaleString('es-MX')})`;
document.getElementById('sumKm').textContent = `$${kmCost.toLocaleString('es-MX')} (${extraKm} km)`;
document.getElementById('totalAmount').textContent = `$${grandTotal.toLocaleString('es-MX')}`;
document.getElementById('depositBadge').textContent =
`Anticipo para apartar (${selectedPackage.depositPercent}% no reembolsable): $${depositRequired.toLocaleString('es-MX')} MXN`;
const name = document.getElementById('clientName').value.trim() || 'No especificado';
const date = document.getElementById('eventDate').value || 'Por definir';
const loc = document.getElementById('eventLocation').value.trim() || 'Por definir';
latestMessage = `¡Hola Fotomattica! ✦ Me gustaría consultar agenda y cotizar mi evento:\n\n` +
`👤 Nombre: ${name}\n` +
`📅 Fecha: ${date}\n` +
`📍 Lugar: ${loc}\n\n` +
`📸 Servicio: ${selectedPackage.name} ($${selectedPackage.price.toLocaleString('es-MX')} MXN)\n` +
(extraHours > 0 ? `⏱️ Horas extras: ${extraHours} hr(s) (+$${hoursCost.toLocaleString('es-MX')})\n` : '') +
(extraKm > 0 ? `🚗 Flete fuera de ZM: ${extraKm} km (+$${kmCost.toLocaleString('es-MX')})\n` : '') +
`\n💰 Total Estimado: $${grandTotal.toLocaleString('es-MX')} MXN\n` +
`🔒 Anticipo requerido (${selectedPackage.depositPercent}%): $${depositRequired.toLocaleString('es-MX')} MXN`;
const btn = document.getElementById('actionBtn');
if (NUMERO_WHATSAPP) {
btn.textContent = "✦ Solicitar Disponibilidad en WhatsApp";
btn.href = `https://wa.me/${NUMERO_WHATSAPP}?text=${encodeURIComponent(latestMessage)}`;
btn.target = "_blank";
} else {
btn.textContent = "✦ Enviar Cotización por Correo";
btn.href = `mailto:${CORREO_CONTACTO}?subject=Cotización Fotomattica - ${encodeURIComponent(name)}&body=${encodeURIComponent(latestMessage)}`;
}
}
document.getElementById('actionBtn').addEventListener('click', (e) => {
if (!NUMERO_WHATSAPP) {
navigator.clipboard.writeText(latestMessage);
const notice = document.getElementById('copyNotice');
notice.style.display = 'block';
setTimeout(() => notice.style.display = 'none', 4000);
}
});
document.getElementById('clientName').addEventListener('input', updateAll);
document.getElementById('eventDate').addEventListener('change', updateAll);
document.getElementById('eventLocation').addEventListener('input', updateAll);
updateAll();
</script>
</body>
</html>