Contacto – Oceanviewus Constructora<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-blue: #0A2E5C;\n --secondary-blue: #1E4A8C;\n --accent-orange: #FF7A00;\n --light-orange: #FF9E42;\n --white: #FFFFFF;\n --light-gray: #F5F7FA;\n --dark-gray: #333333;\n --medium-gray: #666666;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Montserrat', sans-serif;\n background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n position: relative;\n overflow-x: hidden;\n }\n \n \/* Elementos decorativos de construcci\u00f3n *\/\n .construction-elements {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: -1;\n overflow: hidden;\n }\n \n .crane {\n position: absolute;\n top: 10%;\n right: 5%;\n width: 150px;\n height: 200px;\n opacity: 0.03;\n animation: float 20s infinite linear;\n }\n \n .blueprint {\n position: absolute;\n bottom: 15%;\n left: 5%;\n width: 120px;\n height: 120px;\n opacity: 0.04;\n animation: rotate 30s infinite linear;\n }\n \n .building {\n position: absolute;\n top: 60%;\n right: 15%;\n width: 100px;\n height: 150px;\n opacity: 0.03;\n animation: float 25s infinite linear reverse;\n }\n \n .container {\n max-width: 1300px;\n width: 100%;\n display: flex;\n box-shadow: 0 20px 50px rgba(10, 46, 92, 0.15);\n border-radius: 25px;\n overflow: hidden;\n background-color: var(--white);\n animation: fadeIn 1s ease-out;\n position: relative;\n z-index: 1;\n }\n \n .contact-info {\n flex: 1;\n background: linear-gradient(145deg, var(--primary-blue), var(--secondary-blue));\n padding: 70px 50px;\n color: var(--white);\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n overflow: hidden;\n }\n \n .contact-info::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"0.5\" opacity=\"0.1\"\/><path d=\"M0,50 L100,50 M50,0 L50,100\" stroke=\"%23FFFFFF\" stroke-width=\"0.3\" opacity=\"0.05\"\/><\/svg>');\n background-size: 100px;\n opacity: 0.3;\n z-index: 0;\n }\n \n .contact-form {\n flex: 1.2;\n background-color: var(--white);\n padding: 70px 60px;\n position: relative;\n }\n \n .logo-container {\n text-align: center;\n margin-bottom: 50px;\n position: relative;\n z-index: 1;\n animation: slideDown 0.8s ease-out;\n }\n \n .logo {\n font-size: 3.2rem;\n font-weight: 800;\n color: var(--white);\n letter-spacing: 1.5px;\n position: relative;\n display: inline-block;\n padding-bottom: 20px;\n text-transform: uppercase;\n }\n \n .logo:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 120px;\n height: 5px;\n background: linear-gradient(to right, transparent, var(--accent-orange), transparent);\n border-radius: 3px;\n animation: expandWidth 1.2s ease-out 0.5s both;\n }\n \n .logo-subtitle {\n font-size: 1.2rem;\n color: rgba(255, 255, 255, 0.85);\n margin-top: 15px;\n letter-spacing: 3px;\n font-weight: 500;\n text-transform: uppercase;\n }\n \n .info-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 40px;\n position: relative;\n z-index: 1;\n opacity: 0;\n animation: fadeInRight 0.8s ease-out forwards;\n }\n \n .info-item:nth-child(1) { animation-delay: 0.2s; }\n .info-item:nth-child(2) { animation-delay: 0.4s; }\n .info-item:nth-child(3) { animation-delay: 0.6s; }\n .info-item:nth-child(4) { animation-delay: 0.8s; }\n \n .info-icon {\n background: rgba(255, 122, 0, 0.15);\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 20px;\n flex-shrink: 0;\n color: var(--accent-orange);\n font-size: 1.5rem;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n \n .info-icon::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(255, 122, 0, 0.2), transparent);\n z-index: -1;\n }\n \n .info-icon:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(255, 122, 0, 0.2);\n }\n \n .info-text h3 {\n font-size: 1.3rem;\n margin-bottom: 8px;\n color: var(--accent-orange);\n font-weight: 600;\n }\n \n .info-text p {\n color: rgba(255, 255, 255, 0.85);\n line-height: 1.6;\n font-size: 1.05rem;\n }\n \n .social-links {\n display: flex;\n gap: 15px;\n margin-top: 50px;\n position: relative;\n z-index: 1;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 1s forwards;\n }\n \n .social-icon {\n width: 50px;\n height: 50px;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--white);\n font-size: 1.2rem;\n transition: all 0.3s ease;\n text-decoration: none;\n backdrop-filter: blur(5px);\n }\n \n .social-icon:hover {\n background: var(--accent-orange);\n transform: translateY(-5px) scale(1.1);\n box-shadow: 0 10px 20px rgba(255, 122, 0, 0.3);\n }\n \n .form-header {\n margin-bottom: 40px;\n opacity: 0;\n animation: fadeInLeft 0.8s ease-out 0.3s forwards;\n }\n \n .form-title {\n color: var(--primary-blue);\n font-size: 2.5rem;\n margin-bottom: 10px;\n font-weight: 700;\n position: relative;\n display: inline-block;\n }\n \n .form-title:after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 80px;\n height: 4px;\n background: var(--accent-orange);\n border-radius: 2px;\n animation: expandWidth 1s ease-out 0.8s both;\n }\n \n .form-subtitle {\n color: var(--medium-gray);\n margin-top: 20px;\n font-size: 1.1rem;\n line-height: 1.6;\n max-width: 90%;\n }\n \n .form-group {\n margin-bottom: 28px;\n position: relative;\n opacity: 0;\n animation: fadeInUp 0.6s ease-out forwards;\n }\n \n .form-group:nth-child(1) { animation-delay: 0.4s; }\n .form-group:nth-child(2) { animation-delay: 0.5s; }\n .form-group:nth-child(3) { animation-delay: 0.6s; }\n .form-group:nth-child(4) { animation-delay: 0.7s; }\n .form-group:nth-child(5) { animation-delay: 0.8s; }\n .form-group:nth-child(6) { animation-delay: 0.9s; }\n .form-group:nth-child(7) { animation-delay: 1.0s; }\n \n .form-label {\n display: block;\n margin-bottom: 10px;\n color: var(--primary-blue);\n font-weight: 600;\n font-size: 1rem;\n letter-spacing: 0.5px;\n }\n \n .form-input, .form-select, .form-textarea {\n width: 100%;\n padding: 18px 22px;\n border: 2px solid #E6EDF7;\n border-radius: 12px;\n font-size: 1rem;\n transition: all 0.3s ease;\n background-color: var(--light-gray);\n font-family: 'Montserrat', sans-serif;\n color: var(--dark-gray);\n }\n \n .form-input:focus, .form-select:focus, .form-textarea:focus {\n outline: none;\n border-color: var(--accent-orange);\n background-color: var(--white);\n box-shadow: 0 10px 20px rgba(255, 122, 0, 0.1);\n transform: translateY(-2px);\n }\n \n .form-textarea {\n min-height: 150px;\n resize: vertical;\n }\n \n .form-select {\n appearance: none;\n background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2E5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 20px center;\n background-size: 16px;\n }\n \n .submit-btn {\n background: linear-gradient(135deg, var(--accent-orange), var(--light-orange));\n color: var(--white);\n border: none;\n padding: 20px 45px;\n font-size: 1.2rem;\n font-weight: 700;\n border-radius: 12px;\n cursor: pointer;\n transition: all 0.4s ease;\n width: 100%;\n letter-spacing: 1px;\n box-shadow: 0 10px 20px rgba(255, 122, 0, 0.25);\n position: relative;\n overflow: hidden;\n opacity: 0;\n animation: fadeInUp 0.8s ease-out 1.1s forwards;\n }\n \n .submit-btn:before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n transition: 0.5s;\n }\n \n .submit-btn:hover:before {\n left: 100%;\n }\n \n .submit-btn:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 30px rgba(255, 122, 0, 0.4);\n }\n \n .submit-btn:active {\n transform: translateY(0);\n }\n \n .submit-btn i {\n margin-right: 10px;\n }\n \n .form-footer {\n text-align: center;\n margin-top: 30px;\n color: var(--medium-gray);\n font-size: 0.95rem;\n opacity: 0;\n animation: fadeIn 1s ease-out 1.3s forwards;\n }\n \n .required {\n color: var(--accent-orange);\n }\n \n .construction-icon {\n position: absolute;\n right: 30px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--medium-gray);\n opacity: 0.5;\n font-size: 1.2rem;\n }\n \n \/* Animaciones *\/\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes fadeInRight {\n from {\n opacity: 0;\n transform: translateX(-30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n @keyframes fadeInLeft {\n from {\n opacity: 0;\n transform: translateX(30px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n @keyframes expandWidth {\n from { width: 0; }\n to { width: 120px; }\n }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0) rotate(0); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n }\n \n @keyframes rotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n \n \/* Responsive *\/\n @media (max-width: 1100px) {\n .container {\n flex-direction: column;\n max-width: 700px;\n }\n \n .contact-info, .contact-form {\n padding: 50px 40px;\n }\n \n .logo {\n font-size: 2.8rem;\n }\n \n .construction-elements {\n display: none;\n }\n }\n \n @media (max-width: 576px) {\n body {\n padding: 15px;\n }\n \n .contact-info, .contact-form {\n padding: 40px 25px;\n }\n \n .logo {\n font-size: 2.2rem;\n }\n \n .form-title {\n font-size: 2rem;\n }\n \n .submit-btn {\n padding: 18px 25px;\n }\n }\n \n \/* Efecto de onda en el bot\u00f3n *\/\n .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.5);\n transform: scale(0);\n animation: ripple 0.6s linear;\n }\n \n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n \n \/* Barra de progreso en textarea *\/\n .char-counter {\n position: absolute;\n bottom: 10px;\n right: 15px;\n font-size: 0.85rem;\n color: var(--medium-gray);\n opacity: 0.7;\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"construction-elements\">\n <div class=\"crane\">\ud83c\udfd7\ufe0f<\/div>\n <div class=\"blueprint\">\ud83d\udcd0<\/div>\n <div class=\"building\">\ud83c\udfe2<\/div>\n <\/div>\n \n <div class=\"container\">\n \n <div class=\"contact-info\">\n <div class=\"logo-container\">\n <h1 class=\"logo\">Oceanviewus<\/h1>\n <p class=\"logo-subtitle\">Constructora & Desarrollo Inmobiliario<\/p>\n <\/div>\n \n <div class=\"info-item\">\n <div class=\"info-icon\">\n <i class=\"fas fa-hard-hat\"><\/i>\n <\/div>\n <div class=\"info-text\">\n <h3>Direcci\u00f3n<\/h3>\n <p>121 Alhambra Plaza Floor 10, Unit 1000-77, Coral Gables Fl. 33134\nOffice: +1 786 4409737\n<\/p>\n <\/div>\n <\/div>\n \n <div class=\"info-item\">\n <div class=\"info-icon\">\n <i class=\"fas fa-phone-volume\"><\/i>\n <\/div>\n <div class=\"info-text\">\n <h3>Tel\u00e9fono de Contacto<\/h3>\n <p>+1 786 4409737<br>+1 305 6992516<br>+1 305 6992516<br> +1 786 4409737 \n\n<br>Lunes a Viernes: 8am – 7pm<br>S\u00e1bados: 9am – 2pm<\/p>\n <\/div>\n <\/div>\n \n <div class=\"info-item\">\n <div class=\"info-icon\">\n <i class=\"fas fa-envelope-open-text\"><\/i>\n <\/div>\n <div class=\"info-text\">\n <h3>Correo Electr\u00f3nico<\/h3>\n <p> Fpinate@oceanviewus.com<br>candreapinate@oceanviewus.com<br>adrianpinate@oceanviewus.com<\/p>\n <\/div>\n <\/div>\n \n <div class=\"info-item\">\n <div class=\"info-icon\">\n <i class=\"fas fa-calendar-check\"><\/i>\n <\/div>\n <div class=\"info-text\">\n <h3>Horario de Visitas<\/h3>\n <p>Agende una cita para visitar<br>nuestros proyectos en obra.<br>Disponibilidad de lunes a s\u00e1bado.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"social-links\">\n <a href=\"#\" class=\"social-icon\">\n <i class=\"fab fa-linkedin-in\"><\/i>\n <\/a>\n <a href=\"#\" class=\"social-icon\">\n <i class=\"fab fa-instagram\"><\/i>\n <\/a>\n <a href=\"#\" class=\"social-icon\">\n <i class=\"fab fa-youtube\"><\/i>\n <\/a>\n <a href=\"#\" class=\"social-icon\">\n <i class=\"fab fa-pinterest-p\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n \n \n <div class=\"contact-form\">\n <div class=\"form-header\">\n <h2 class=\"form-title\">Solicite una Cotizaci\u00f3n<\/h2>\n <p class=\"form-subtitle\">Complete el formulario y nuestro equipo de expertos en construcci\u00f3n se pondr\u00e1 en contacto con usted en menos de 24 horas para discutir su proyecto.<\/p>\n <\/div>\n \n <form id=\"contactForm\">\n <div class=\"form-group\">\n <label for=\"name\" class=\"form-label\">Nombre completo <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"name\" class=\"form-input\" placeholder=\"Ingrese su nombre completo\" required>\n <div class=\"construction-icon\">\n <i class=\"fas fa-user-hard-hat\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"email\" class=\"form-label\">Correo electr\u00f3nico <span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" class=\"form-input\" placeholder=\"ejemplo@empresa.com\" required>\n <div class=\"construction-icon\">\n <i class=\"fas fa-envelope\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"phone\" class=\"form-label\">Tel\u00e9fono <span class=\"required\">*<\/span><\/label>\n <input type=\"tel\" id=\"phone\" class=\"form-input\" placeholder=\"+1 (555) 123-4567\" required>\n <div class=\"construction-icon\">\n <i class=\"fas fa-phone\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"project-type\" class=\"form-label\">Tipo de Proyecto <span class=\"required\">*<\/span><\/label>\n <select id=\"project-type\" class=\"form-select\" required>\n <option value=\"\" disabled selected>Seleccione el tipo de proyecto<\/option>\n <option value=\"residencial\">Residencial – Vivienda Unifamiliar<\/option>\n <option value=\"multifamiliar\">Residencial – Edificio Multifamiliar<\/option>\n <option value=\"comercial\">Comercial – Oficinas\/Locales<\/option>\n <option value=\"industrial\">Industrial – Naves\/F\u00e1bricas<\/option>\n <option value=\"remodelacion\">Remodelaci\u00f3n Integral<\/option>\n <option value=\"ampliacion\">Ampliaci\u00f3n de Espacios<\/option>\n <option value=\"otro\">Otro tipo de proyecto<\/option>\n <\/select>\n <div class=\"construction-icon\">\n <i class=\"fas fa-drafting-compass\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"budget\" class=\"form-label\">Presupuesto Estimado (USD)<\/label>\n <select id=\"budget\" class=\"form-select\">\n <option value=\"\" selected>Seleccione un rango de presupuesto<\/option>\n <option value=\"50-100\">$50,000 – $100,000<\/option>\n <option value=\"100-250\">$100,000 – $250,000<\/option>\n <option value=\"250-500\">$250,000 – $500,000<\/option>\n <option value=\"500-1000\">$500,000 – $1,000,000<\/option>\n <option value=\"1000+\">M\u00e1s de $1,000,000<\/option>\n <option value=\"indefinido\">Por definir<\/option>\n <\/select>\n <div class=\"construction-icon\">\n <i class=\"fas fa-dollar-sign\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"timeline\" class=\"form-label\">Plazo Estimado para Inicio<\/label>\n <select id=\"timeline\" class=\"form-select\">\n <option value=\"\" selected>Seleccione el plazo para iniciar<\/option>\n <option value=\"1-3\">1 – 3 meses<\/option>\n <option value=\"3-6\">3 – 6 meses<\/option>\n <option value=\"6-12\">6 – 12 meses<\/option>\n <option value=\"12+\">M\u00e1s de 12 meses<\/option>\n <option value=\"indefinido\">Por definir<\/option>\n <\/select>\n <div class=\"construction-icon\">\n <i class=\"fas fa-calendar-alt\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"message\" class=\"form-label\">Descripci\u00f3n del Proyecto <span class=\"required\">*<\/span><\/label>\n <textarea id=\"message\" class=\"form-textarea\" placeholder=\"Describa los detalles de su proyecto: ubicaci\u00f3n, superficie, caracter\u00edsticas especiales, requerimientos espec\u00edficos, etc.\" required><\/textarea>\n <div class=\"char-counter\">0\/500<\/div>\n <\/div>\n \n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n <i class=\"fas fa-paper-plane\"><\/i> Enviar Solicitud de Cotizaci\u00f3n\n <\/button>\n \n <p class=\"form-footer\">Nuestro equipo de expertos revisar\u00e1 su solicitud y se contactar\u00e1 con usted en menos de 24 horas h\u00e1biles.<\/p>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Contador de caracteres para textarea\n const messageTextarea = document.getElementById('message');\n const charCounter = document.querySelector('.char-counter');\n \n messageTextarea.addEventListener('input', function() {\n const length = this.value.length;\n charCounter.textContent = `${length}\/500`;\n \n if (length > 450) {\n charCounter.style.color = 'var(--accent-orange)';\n } else {\n charCounter.style.color = 'var(--medium-gray)';\n }\n });\n \n \/\/ Efecto ripple en el bot\u00f3n\n const submitBtn = document.getElementById('submitBtn');\n \n submitBtn.addEventListener('click', function(e) {\n \/\/ Crear efecto ripple\n const rect = this.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n const ripple = document.createElement('span');\n ripple.classList.add('ripple');\n ripple.style.left = x + 'px';\n ripple.style.top = y + 'px';\n \n this.appendChild(ripple);\n \n \/\/ Eliminar el elemento despu\u00e9s de la animaci\u00f3n\n setTimeout(() => {\n ripple.remove();\n }, 600);\n });\n \n \/\/ Validaci\u00f3n y env\u00edo del formulario\n document.getElementById('contactForm').addEventListener('submit', function(e) {\n e.preventDefault();\n \n \/\/ Validaci\u00f3n de campos obligatorios\n const requiredFields = this.querySelectorAll('[required]');\n let valid = true;\n \n requiredFields.forEach(field => {\n if (!field.value.trim()) {\n field.style.borderColor = '#ff3860';\n valid = false;\n \n \/\/ Agregar animaci\u00f3n de shake\n field.style.animation = 'none';\n field.offsetHeight; \/\/ Trigger reflow\n field.style.animation = 'shake 0.5s ease-in-out';\n \n setTimeout(() => {\n field.style.animation = '';\n }, 500);\n } else {\n field.style.borderColor = '#E6EDF7';\n }\n });\n \n if (!valid) {\n showNotification('Por favor, complete todos los campos obligatorios.', 'error');\n return;\n }\n \n \/\/ Simulaci\u00f3n de env\u00edo\n const originalText = submitBtn.innerHTML;\n \n submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Procesando su solicitud...';\n submitBtn.disabled = true;\n \n \/\/ Animaci\u00f3n de carga\n submitBtn.style.background = 'linear-gradient(135deg, #1E4A8C, #0A2E5C)';\n \n \/\/ Simulaci\u00f3n de petici\u00f3n al servidor\n setTimeout(() => {\n showNotification('\u00a1Solicitud enviada con \u00e9xito! Nuestro equipo se contactar\u00e1 con usted en menos de 24 horas.', 'success');\n \n \/\/ Restaurar bot\u00f3n\n submitBtn.innerHTML = originalText;\n submitBtn.disabled = false;\n submitBtn.style.background = 'linear-gradient(135deg, var(--accent-orange), var(--light-orange))';\n \n \/\/ Mostrar mensaje de confirmaci\u00f3n\n document.getElementById('contactForm').reset();\n charCounter.textContent = '0\/500';\n \n }, 2000);\n });\n \n \/\/ Mostrar notificaci\u00f3n\n function showNotification(message, type) {\n \/\/ Crear elemento de notificaci\u00f3n\n const notification = document.createElement('div');\n notification.className = `notification ${type}`;\n notification.innerHTML = `\n <div style=\"position: fixed; top: 30px; right: 30px; background: ${type === 'success' ? '#23d160' : '#ff3860'}; \n color: white; padding: 20px 25px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); \n z-index: 1000; display: flex; align-items: center; animation: fadeInUp 0.5s ease-out;\">\n <i class=\"fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}\" style=\"margin-right: 12px; font-size: 1.3rem;\"><\/i>\n <span>${message}<\/span>\n <\/div>\n `;\n \n document.body.appendChild(notification);\n \n \/\/ Eliminar notificaci\u00f3n despu\u00e9s de 5 segundos\n setTimeout(() => {\n notification.style.animation = 'fadeOut 0.5s ease-out forwards';\n setTimeout(() => {\n document.body.removeChild(notification);\n }, 500);\n }, 5000);\n }\n \n \/\/ Animaci\u00f3n shake para campos inv\u00e1lidos\n const style = document.createElement('style');\n style.textContent = `\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n }\n \n @keyframes fadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-20px); }\n }\n `;\n document.head.appendChild(style);\n \n \/\/ Efectos visuales en los campos\n const inputs = document.querySelectorAll('.form-input, .form-select, .form-textarea');\n inputs.forEach(input => {\n input.addEventListener('focus', function() {\n this.parentElement.style.transform = 'translateY(-3px)';\n });\n \n input.addEventListener('blur', function() {\n this.parentElement.style.transform = 'translateY(0)';\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contacto – Oceanviewus Constructora \ud83c\udfd7\ufe0f \ud83d\udcd0 \ud83c\udfe2 Oceanviewus Constructora & Desarrollo Inmobiliario Direcci\u00f3n 121 Alhambra Plaza Floor 10, Unit 1000-77, Coral Gables Fl. 33134 Office: +1 786 4409737 Tel\u00e9fono de Contacto +1 786 4409737+1 305 6992516+1 305 6992516 +1 786 4409737 Lunes a Viernes: 8am – 7pmS\u00e1bados: 9am – 2pm Correo Electr\u00f3nico Fpinate@oceanviewus.comcandreapinate@oceanviewus.comadrianpinate@oceanviewus.com Horario de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":9,"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":365,"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/pages\/13\/revisions\/365"}],"wp:attachment":[{"href":"https:\/\/ocean.viewus.saintve.com\/en\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":13,"date":"2025-11-18T15:00:52","date_gmt":"2025-11-18T15:00:52","guid":{"rendered":"http:\/\/ocean.viewus.saintve.com\/?page_id=13"},"modified":"2025-12-02T14:38:16","modified_gmt":"2025-12-02T14:38:16","slug":"contact","status":"publish","type":"page","link":"https:\/\/ocean.viewus.saintve.com\/en\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"\n

<\/div>\n\n\n\n