{"id":544,"date":"2022-09-29T23:35:42","date_gmt":"2022-09-29T23:35:42","guid":{"rendered":"https:\/\/maxhormigon.com\/?page_id=544"},"modified":"2026-02-13T03:22:31","modified_gmt":"2026-02-13T03:22:31","slug":"calculadora-de-hormigon","status":"publish","type":"page","link":"https:\/\/maxhormigon.com\/index.php\/calculadora-de-hormigon\/","title":{"rendered":"CALCULADORA DE HORMIG\u00d3N"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"544\" class=\"elementor elementor-544\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-71e067a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"71e067a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f2575ce\" data-id=\"f2575ce\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-25af28d elementor-widget elementor-widget-html\" data-id=\"25af28d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"max-wrapper-final\" style=\"width: 100%; min-height: 750px !important; position: relative; background-color: #f4f7f6; border-radius: 12px; overflow: hidden; border: 1px solid #ccc;\">\r\n\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700;900&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n\r\n    <style>\r\n        #max-wrapper-final * { font-family: 'Roboto', sans-serif !important; box-sizing: border-box; }\r\n        #google-map { width: 100%; height: 750px; z-index: 1; }\r\n        .mx-card { position: absolute; top: 20px; left: 20px; width: 340px; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 500; border-top: 5px solid #E31C25; }\r\n        .mx-btn { width: 100%; padding: 14px; background: #0f172a; color: #fff; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; margin-top: 20px; text-transform: uppercase; }\r\n        .mx-btn:hover { background: #E31C25; }\r\n        .mx-input { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 5px; margin-bottom: 10px; }\r\n        .mx-hidden { display: none !important; }\r\n        .mx-start-box { border: 2px dashed #cbd5e1; padding: 30px; text-align: center; cursor: pointer; border-radius: 10px; transition: 0.3s; }\r\n        .mx-start-box:hover { border-color: #E31C25; }\r\n        #mx-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; display: none; justify-content: center; align-items: center; }\r\n        .mx-modal-box { background: #fff; padding: 30px; width: 90%; max-width: 350px; border-radius: 8px; text-align: center; border-top: 5px solid #E31C25; }\r\n    \/* Ajuste para m\u00f3viles: cuadro inicial compacto *\/\r\n        @media (max-width: 768px) {\r\n            .mx-card { \r\n                width: 90% !important; \r\n                left: 5% !important; \r\n                top: 10px !important; \r\n                padding: 10px !important; \r\n            }\r\n            .mx-start-box { \r\n                padding: 10px !important; \r\n                display: flex; \r\n                align-items: center; \r\n                justify-content: center; \r\n                gap: 10px;\r\n            }\r\n            .mx-start-box span { font-size: 20px !important; }\r\n            .mx-start-box p { font-size: 14px !important; margin: 0; }\r\n            #step-start h2 { display: none; } \/* Ocultamos el t\u00edtulo largo en m\u00f3vil *\/\r\n        }\r\n    \r\n    \/* 1. Estilo para Computador (Escritorio): Ocultamos el bot\u00f3n de repliegue *\/\r\n        .btn-toggle { display: none; } \r\n\r\n        \/* 2. Estilo Exclusivo para M\u00f3viles (Pantallas menores a 768px) *\/\r\n        @media (max-width: 768px) {\r\n            .btn-toggle { \r\n                display: flex; \/* Solo aparece en el celular *\/\r\n                position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);\r\n                background: #0f172a; color: white; border-radius: 50%; width: 26px; height: 26px;\r\n                align-items: center; justify-content: center; cursor: pointer;\r\n                border: 2px solid white; z-index: 600; font-size: 10px;\r\n            }\r\n            .mx-card { \r\n                width: 92% !important; \r\n                left: 4% !important; \r\n                top: 10px !important; \r\n                padding: 12px !important;\r\n                transition: transform 0.4s ease; \r\n            }\r\n            .mx-card.minimized { transform: translateY(-75%); } \r\n            .mx-start-box { padding: 8px !important; display: flex; align-items: center; gap: 8px; }\r\n            #step-start h2 { display: none; }\r\n        }\r\n        <\/style>\r\n\r\n    <div id=\"google-map\"><\/div>\r\n\r\n    <div class=\"mx-card\">\r\n        <div id=\"step-start\">\r\n            <h2 style=\"text-align:center; color:#1e293b; font-size:1.4rem; font-weight:900;\">Ubicaci\u00f3n de Obra<\/h2>\r\n            <div class=\"mx-start-box\" onclick=\"alert('Selecciona en el mapa la ubicaci\u00f3n de tu obra')\">\r\n                <span>\ud83c\udfd7\ufe0f<\/span>\r\n                <p style=\"font-weight:700; color:#64748b;\">Selecciona la ubicaci\u00f3n de tu obra<\/p>\r\n            <\/div>\r\n        <\/div>\r\n           <div class=\"btn-toggle\" onclick=\"MaxApp.toggleCard()\">\u25bc<\/div>\r\n        <div id=\"step-calc\" class=\"mx-hidden\">\r\n            <div style=\"background:#ecfdf5; padding:10px; border-radius:6px; margin-bottom:10px; color:#065f46; font-weight:700;\">\ud83c\udfed Planta: <span id=\"lbl-plant\">...<\/span><\/div>\r\n            <div style=\"background:#f3f4f6; padding:10px; border-radius:6px; margin-bottom:10px;\">\ud83d\udee3\ufe0f Ruta: <span id=\"lbl-dist\">0 km<\/span><\/div>\r\n            \r\n            <div style=\"display:flex; gap:10px;\">\r\n                <input type=\"date\" id=\"inp-date\" class=\"mx-input\">\r\n                <select id=\"inp-time\" class=\"mx-input\"><option>08:00<\/option><option>11:00<\/option><option>14:00<\/option><\/select>\r\n            <\/div>\r\n            \r\n            <select id=\"inp-psi\" class=\"mx-input\" onchange=\"MaxApp.calc()\">\r\n                <option value=\"80\">180 kg\/cm\u00b2 ($80)<\/option>\r\n                <option value=\"85\" selected>210 kg\/cm\u00b2 ($85)<\/option>\r\n                <option value=\"98\">280 kg\/cm\u00b2 ($98)<\/option>\r\n            <\/select>\r\n            <input type=\"number\" id=\"inp-qty\" value=\"8\" class=\"mx-input\" onchange=\"MaxApp.calc()\">\r\n\r\n            <div style=\"text-align:right; margin-top:15px;\">\r\n                <div style=\"font-size:2.5rem; font-weight:900;\">$<span id=\"val-total\">0<\/span><\/div>\r\n                <small>IVA y Transporte Incluido<\/small>\r\n            <\/div>\r\n            <button class=\"mx-btn\" onclick=\"MaxApp.modal()\">Confirmar<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"mx-modal\">\r\n        <div class=\"mx-modal-box\">\r\n            <h3>Finalizar Pedido<\/h3>\r\n            <input type=\"text\" id=\"cli-name\" placeholder=\"Nombre\" class=\"mx-input\">\r\n            <input type=\"tel\" id=\"cli-phone\" placeholder=\"WhatsApp\" class=\"mx-input\">\r\n            <button class=\"mx-btn\" style=\"background:#E31C25;\" onclick=\"MaxApp.submit()\">Enviar Pedido<\/button>\r\n            <div onclick=\"document.getElementById('mx-modal').style.display='none'\" style=\"margin-top:10px; font-size:0.8rem; cursor:pointer; color:#666;\">Volver<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const API_KEY = \"AIzaSyAkBpabbAu4f9o_16BG5rKC9vBTVUb6Pas\";\r\n        const BACKEND_URL = \"https:\/\/maxhormigon.com\/api_hormigon.php\";\r\n\r\n        var MaxApp = {\r\n            map: null,\r\n            directionsRenderer: null,\r\n            directionsService: null,\r\n            plants: [],\r\n            order: null,\r\n            destMarker: null,\r\n\r\n            load: function() {\r\n                var s = document.createElement(\"script\");\r\n                s.src = \"https:\/\/maps.googleapis.com\/maps\/api\/js?key=\" + API_KEY + \"&libraries=geometry&callback=MaxApp.init\";\r\n                document.head.appendChild(s);\r\n            },\r\n\r\n            init: function() {\r\n                MaxApp.map = new google.maps.Map(document.getElementById(\"google-map\"), {\r\n                    center: { lat: -0.1807, lng: -78.4678 },\r\n                    zoom: 10,\r\n                    disableDefaultUI: true,\r\n                    clickableIcons: false\r\n                });\r\n\r\n                MaxApp.directionsRenderer = new google.maps.DirectionsRenderer({\r\n                    map: MaxApp.map,\r\n                    suppressMarkers: true,\r\n                    polylineOptions: { strokeColor: \"#E31C25\", strokeWeight: 6 }\r\n                });\r\n                MaxApp.directionsService = new google.maps.DirectionsService();\r\n\r\n                fetch(BACKEND_URL).then(r => r.json()).then(data => {\r\n                    MaxApp.plants = data;\r\n                    MaxApp.draw();\r\n                });\r\n\r\n                MaxApp.map.addListener(\"click\", e => MaxApp.route(e.latLng));\r\n            },\r\n\r\n           draw: function() {\r\n                if (MaxApp.plants && MaxApp.plants.length > 0) {\r\n                    MaxApp.plants.forEach(p => {\r\n                        \/\/ Verifica si la base de datos entreg\u00f3 una ruta de icono\r\n                        if (p.icono && p.icono !== \"\") {\r\n                            new google.maps.Marker({ \r\n                                position: {lat: parseFloat(p.lat), lng: parseFloat(p.lng)}, \r\n                                map: MaxApp.map, \r\n                                icon: {\r\n                                    url: p.icono,\r\n                                    scaledSize: new google.maps.Size(50, 50),\r\n                                    anchor: new google.maps.Point(25, 25)\r\n                                },\r\n                                title: p.nombre,\r\n                                optimized: false\r\n                            });\r\n                        }\r\n                    });\r\n                }\r\n            },\r\n\r\n            route: function(dest) {\r\n                let closest = null, minD = Infinity;\r\n                MaxApp.plants.forEach(p => {\r\n                    let d = google.maps.geometry.spherical.computeDistanceBetween(dest, new google.maps.LatLng(p.lat, p.lng));\r\n                    if(d < minD) { minD = d; closest = p; }\r\n                });\r\n\r\n                \/\/ MARCADOR DE OBRA: \u00cdCONO OFICIAL DE GOOGLE MAPS\r\n                if (MaxApp.destMarker) MaxApp.destMarker.setMap(null);\r\n                MaxApp.destMarker = new google.maps.Marker({\r\n                    position: dest,\r\n                    map: MaxApp.map,\r\n                    icon: { \r\n                        url: \"https:\/\/maps.google.com\/mapfiles\/ms\/icons\/red-dot.png\", \r\n                        scaledSize: new google.maps.Size(40, 40),\r\n                        anchor: new google.maps.Point(20, 40)\r\n                    },\r\n                    title: \"Ubicaci\u00f3n de la Obra\",\r\n                    animation: google.maps.Animation.DROP\r\n                });\r\n\r\n                MaxApp.directionsService.route({\r\n                    origin: {lat: parseFloat(closest.lat), lng: parseFloat(closest.lng)},\r\n                    destination: dest,\r\n                    travelMode: 'DRIVING'\r\n                }, (res, stat) => {\r\n                    if (stat === 'OK') {\r\n                        MaxApp.directionsRenderer.setDirections(res);\r\n                        let km = res.routes[0].legs[0].distance.value \/ 1000;\r\n                        MaxApp.order = { plant: closest, dist: km, lat: dest.lat(), lng: dest.lng() };\r\n                        document.getElementById('step-start').classList.add('mx-hidden');\r\n                        document.getElementById('step-calc').classList.remove('mx-hidden');\r\n                        document.getElementById('lbl-plant').innerText = closest.nombre;\r\n                        document.getElementById('lbl-dist').innerText = km.toFixed(1) + \" km\";\r\n                        MaxApp.calc();\r\n                    }\r\n                });\r\n            },\r\n\r\n            calc: function() {\r\n                if(!MaxApp.order) return;\r\n                let extra = (MaxApp.order.dist > 10) ? (MaxApp.order.dist - 10) * 0.35 : 0;\r\n                let total = Math.round((parseFloat(document.getElementById('inp-psi').value) + extra) * parseFloat(document.getElementById('inp-qty').value));\r\n                document.getElementById('val-total').innerText = total;\r\n                MaxApp.order.total = total;\r\n            },\r\n\r\n            modal: function() { document.getElementById('mx-modal').style.display = 'flex'; },\r\n\r\n            submit: function() {\r\n                let p = {\r\n                    nombre: document.getElementById('cli-name').value,\r\n                    telefono: document.getElementById('cli-phone').value,\r\n                    total: MaxApp.order.total,\r\n                    dist: MaxApp.order.dist,\r\n                    psi: document.getElementById('inp-psi').options[document.getElementById('inp-psi').selectedIndex].text,\r\n                    m3: document.getElementById('inp-qty').value\r\n                };\r\n                fetch(BACKEND_URL, { method: 'POST', body: JSON.stringify(p) }).then(() => {\r\n                    \/\/ WHATSAPP CORPORATIVO\r\n                    let msg = `*NUEVO PEDIDO MAX HORMIG\u00d3N*\\nCliente: ${p.nombre}\\nWhatsApp: ${p.telefono}\\nPedido: ${p.m3}m\u00b3 (${p.psi})\\nTotal: $${p.total}`;\r\n                    window.open(\"https:\/\/wa.me\/593989393708?text=\" + encodeURIComponent(msg));\r\n                    location.reload();\r\n                });\r\n            },\r\n            toggleCard: function() {\r\n                const card = document.querySelector('.mx-card');\r\n                const btn = document.querySelector('.btn-toggle');\r\n                if (card && btn) {\r\n                    card.classList.toggle('minimized');\r\n                    btn.innerText = card.classList.contains('minimized') ? '\u25bc' : '\u25b2';\r\n                }\r\n            }\r\n        };\r\n        MaxApp.load();\r\n    <\/script>\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ubicaci\u00f3n de Obra \ud83c\udfd7\ufe0f Selecciona la ubicaci\u00f3n de tu obra \u25bc \ud83c\udfed Planta: &#8230; \ud83d\udee3\ufe0f Ruta: 0 km 08:0011:0014:00 180 kg\/cm\u00b2 ($80)210 kg\/cm\u00b2 ($85)280 kg\/cm\u00b2 ($98) $0 IVA y Transporte Incluido Confirmar Finalizar Pedido Enviar Pedido Volver<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":[],"_links":{"self":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages\/544"}],"collection":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/comments?post=544"}],"version-history":[{"count":245,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages\/544\/revisions"}],"predecessor-version":[{"id":1106,"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/pages\/544\/revisions\/1106"}],"wp:attachment":[{"href":"https:\/\/maxhormigon.com\/index.php\/wp-json\/wp\/v2\/media?parent=544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}