Jardin Seco
/* Botón Cotizar */
.btn-cotizar {
background: #25D366 !important;
color: white !important;
padding: 14px 32px !important;
font-size: 17px !important;
font-weight: bold !important;
border: none !important;
border-radius: 30px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin: 20px 0 !important;
box-shadow: 0 4px 15px rgba(37,211,102,0.4) !important;
text-decoration: none !important;
transition: none !important;
}
.btn-cotizar:hover {
background: #1ebe5d !important;
color: white !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(37,211,102,0.6) !important;
text-decoration: none !important;
}
.btn-cotizar svg { width: 22px; height: 22px; fill: white; flex-shrink: 0; }
/* Overlay */
.cotizar-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 999999;
justify-content: center;
align-items: flex-start;
overflow-y: auto;
padding: 30px 15px;
box-sizing: border-box;
}
.cotizar-overlay.activo { display: flex; }
/* Modal */
.cotizar-modal {
background: white;
border-radius: 16px;
padding: 30px;
width: 100%;
max-width: 480px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: slideUp 0.3s ease;
margin: auto;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cotizar-modal h2 { color: #2d5a27; margin: 0 0 20px; font-size: 20px; }
.cotizar-modal .cerrar {
position: absolute; top: 15px; right: 18px;
background: none !important; border: none !important; font-size: 24px;
cursor: pointer; color: #888; line-height: 1; padding: 0 !important;
}
.cotizar-modal label { display: block; margin-bottom: 4px; font-size: 14px; font-weight: bold; color: #444; }
.cotizar-modal input,
.cotizar-modal textarea,
.cotizar-modal select {
width: 100% !important; padding: 10px 12px !important; border: 1.5px solid #ddd !important;
border-radius: 8px !important; font-size: 14px !important; margin-bottom: 14px !important;
box-sizing: border-box !important;
}
.cotizar-modal input:focus,
.cotizar-modal textarea:focus,
.cotizar-modal select:focus { border-color: #25D366 !important; outline: none !important; }
.cotizar-modal textarea { height: 90px; resize: vertical; }
.btn-enviar-wa {
background: #25D366 !important;
color: white !important;
border: none !important;
padding: 13px !important;
width: 100% !important;
font-size: 16px !important;
font-weight: bold !important;
border-radius: 30px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
.btn-enviar-wa:hover { background: #1ebe5d !important; }
.btn-enviar-wa svg { width: 20px; height: 20px; fill: white; }
.campo-requerido { color: red; margin-left: 2px; }
function abrirModalCotizar() {
document.getElementById('modalCotizar').classList.add('activo');
document.body.style.overflow = 'hidden';
}
function cerrarModalCotizar() {
document.getElementById('modalCotizar').classList.remove('activo');
document.body.style.overflow = '';
}
document.getElementById('modalCotizar').addEventListener('click', function(e) {
if (e.target === this) cerrarModalCotizar();
});
function enviarWhatsApp() {
const nombre = document.getElementById('cot-nombre').value.trim();
const empresa = document.getElementById('cot-empresa').value.trim();
const telefono = document.getElementById('cot-telefono').value.trim();
const area = document.getElementById('cot-area').value.trim();
const ciudad = document.getElementById('cot-ciudad').value.trim();
const tipo = document.getElementById('cot-tipo').value;
const mensaje = document.getElementById('cot-mensaje').value.trim();
if (!nombre) { alert('Por favor ingresa tu nombre.'); return; }
if (!telefono) { alert('Por favor ingresa tu teléfono.'); return; }
if (!area) { alert('Por favor ingresa el área aproximada.'); return; }
let texto = `🌿 *Nueva Solicitud de Cotización - Jardín Zen Comercial*\n\n`;
texto += `👤 *Nombre:* ${nombre}\n`;
if (empresa) texto += `🏢 *Empresa:* ${empresa}\n`;
texto += `📞 *Teléfono:* ${telefono}\n`;
texto += `📐 *Área aprox.:* ${area} m²\n`;
if (ciudad) texto += `📍 *Ciudad:* ${ciudad}\n`;
if (tipo) texto += `🏗️ *Tipo de espacio:* ${tipo}\n`;
if (mensaje) texto += `💬 *Detalles:* ${mensaje}\n`;
texto += `\n_Enviado desde arboreo.co_`;
// ⬅️ CAMBIA POR TU NÚMERO (57 + número sin 0)
const numeroWhatsApp = '573170256575';
window.open(`https://wa.me/${numeroWhatsApp}?text=${encodeURIComponent(texto)}`, '_blank');
cerrarModalCotizar();
}
