{"id":2529,"date":"2026-06-11T09:47:46","date_gmt":"2026-06-11T09:47:46","guid":{"rendered":"https:\/\/aiper.com\/blogs\/?page_id=2529"},"modified":"2026-06-24T04:25:41","modified_gmt":"2026-06-24T04:25:41","slug":"calculadora-de-mantillo","status":"publish","type":"page","link":"https:\/\/aiper.com\/blogs\/es\/calculadora-de-mantillo\/","title":{"rendered":"Calculadora de mantillo"},"content":{"rendered":"\n<div class=\"aiper-toolkit-wrapper\">\n    <style>\n        :root {\n            --aiper-teal: #1ecad3;\n            --aiper-purple: #9486f7;\n            --aiper-dark: #1a1a2e;\n            --aiper-text: #2d3748;\n            --aiper-subtle: #6b7280;\n            --aiper-border: #e5e7eb;\n            --aiper-bg: #f9fafb;\n            --aiper-white: #ffffff;\n            --aiper-error: #ef4444;\n            --aiper-success: #10b981;\n            --aiper-gradient: linear-gradient(135deg, #1ecad3, #9486f7);\n            --aiper-gradient-hover: linear-gradient(135deg, #1ab8c0, #7f70e8);\n            --aiper-radius: 10px;\n            --aiper-radius-sm: 6px;\n            --aiper-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);\n            --aiper-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);\n            --aiper-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .aiper-toolkit-wrapper {\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n            color: var(--aiper-text);\n            background: var(--aiper-white);\n            border-radius: 14px;\n            max-width: 720px;\n            margin: 0 auto;\n            padding: 28px 24px 24px;\n            box-sizing: border-box;\n            line-height: 1.6;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n            container-type: inline-size;\n        }\n        .aiper-toolkit-wrapper *,\n        .aiper-toolkit-wrapper *::before,\n        .aiper-toolkit-wrapper *::after {\n            box-sizing: border-box;\n        }\n\n        \/* Selector de regi\u00f3n *\/\n        .aiper-toolkit-wrapper .aiper-region-toggle-wrap {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            margin-bottom: 24px;\n            flex-wrap: wrap;\n        }\n        .aiper-toolkit-wrapper .aiper-region-label {\n            font-size: 0.875rem;\n            font-weight: 600;\n            color: var(--aiper-subtle);\n            text-transform: uppercase;\n            letter-spacing: 0.04em;\n            white-space: nowrap;\n        }\n        .aiper-toolkit-wrapper .aiper-region-toggle {\n            display: flex;\n            background: #f1f5f9;\n            border-radius: 30px;\n            padding: 4px;\n            gap: 2px;\n            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n        }\n        .aiper-toolkit-wrapper .aiper-region-btn {\n            padding: 10px 20px;\n            border: none;\n            background: transparent;\n            border-radius: 28px;\n            cursor: pointer;\n            font-size: 0.9rem;\n            font-weight: 600;\n            color: var(--aiper-subtle);\n            transition: var(--aiper-transition);\n            white-space: nowrap;\n            letter-spacing: 0.01em;\n            position: relative;\n            outline: none;\n        }\n        .aiper-toolkit-wrapper .aiper-region-btn:focus-visible {\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.35);\n        }\n        .aiper-toolkit-wrapper .aiper-region-btn.active {\n            background: var(--aiper-gradient);\n            color: #fff;\n            box-shadow: var(--aiper-shadow-md);\n        }\n        .aiper-toolkit-wrapper .aiper-region-btn:not(.active):hover {\n            color: var(--aiper-dark);\n            background: rgba(255, 255, 255, 0.5);\n        }\n\n        \/* T\u00edtulos de secci\u00f3n *\/\n        .aiper-toolkit-wrapper .aiper-section-title {\n            font-size: 0.8rem;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.05em;\n            color: var(--aiper-subtle);\n            margin: 0 0 10px 0;\n            padding: 0;\n        }\n\n        \/* Tarjetas de zona *\/\n        .aiper-toolkit-wrapper .aiper-areas-container {\n            display: flex;\n            flex-direction: column;\n            gap: 14px;\n            margin-bottom: 16px;\n        }\n        .aiper-toolkit-wrapper .aiper-area-card {\n            background: var(--aiper-bg);\n            border: 1px solid var(--aiper-border);\n            border-radius: var(--aiper-radius);\n            padding: 18px 16px 14px;\n            transition: var(--aiper-transition);\n            position: relative;\n            box-shadow: var(--aiper-shadow);\n        }\n        .aiper-toolkit-wrapper .aiper-area-card:hover {\n            border-color: #d1d5db;\n            box-shadow: var(--aiper-shadow-md);\n        }\n        .aiper-toolkit-wrapper .aiper-area-card-header {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            margin-bottom: 12px;\n            flex-wrap: wrap;\n        }\n        .aiper-toolkit-wrapper .aiper-area-number {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 30px;\n            height: 30px;\n            border-radius: 50%;\n            background: var(--aiper-gradient);\n            color: #fff;\n            font-weight: 700;\n            font-size: 0.85rem;\n            flex-shrink: 0;\n        }\n        .aiper-toolkit-wrapper .aiper-area-label-input {\n            flex: 1 1 140px;\n            min-width: 120px;\n            padding: 8px 12px;\n            border: 1px solid var(--aiper-border);\n            border-radius: var(--aiper-radius-sm);\n            font-size: 0.875rem;\n            color: var(--aiper-dark);\n            background: var(--aiper-white);\n            transition: var(--aiper-transition);\n            outline: none;\n            font-family: inherit;\n        }\n        .aiper-toolkit-wrapper .aiper-area-label-input:focus {\n            border-color: var(--aiper-teal);\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.1);\n        }\n        .aiper-toolkit-wrapper .aiper-area-label-input::placeholder {\n            color: #c4c9d0;\n            font-style: italic;\n        }\n        .aiper-toolkit-wrapper .aiper-area-remove-btn {\n            width: 32px;\n            height: 32px;\n            border-radius: 50%;\n            border: 1px solid var(--aiper-border);\n            background: var(--aiper-white);\n            color: #9ca3af;\n            cursor: pointer;\n            font-size: 1.1rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: var(--aiper-transition);\n            flex-shrink: 0;\n            padding: 0;\n            line-height: 1;\n        }\n        .aiper-toolkit-wrapper .aiper-area-remove-btn:hover {\n            color: #ef4444;\n            border-color: #fca5a5;\n            background: #fef2f2;\n        }\n        .aiper-toolkit-wrapper .aiper-area-remove-btn:focus-visible {\n            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);\n            outline: none;\n        }\n        .aiper-toolkit-wrapper .aiper-area-remove-btn:disabled {\n            opacity: 0.3;\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n        .aiper-toolkit-wrapper .aiper-shape-select-row {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            margin-bottom: 10px;\n            flex-wrap: wrap;\n        }\n        .aiper-toolkit-wrapper .aiper-shape-select-label {\n            font-size: 0.8rem;\n            font-weight: 600;\n            color: var(--aiper-subtle);\n            text-transform: uppercase;\n            letter-spacing: 0.03em;\n            white-space: nowrap;\n        }\n        .aiper-toolkit-wrapper .aiper-shape-select {\n            padding: 8px 32px 8px 12px;\n            border: 1px solid var(--aiper-border);\n            border-radius: var(--aiper-radius-sm);\n            font-size: 0.875rem;\n            color: var(--aiper-dark);\n            background: var(--aiper-white);\n            cursor: pointer;\n            outline: none;\n            font-family: inherit;\n            appearance: none;\n            -webkit-appearance: none;\n            background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' 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 10px center;\n            transition: var(--aiper-transition);\n            min-width: 130px;\n        }\n        .aiper-toolkit-wrapper .aiper-shape-select:focus {\n            border-color: var(--aiper-teal);\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.1);\n        }\n        .aiper-toolkit-wrapper .aiper-dims-row {\n            display: flex;\n            gap: 10px;\n            flex-wrap: wrap;\n            align-items: flex-end;\n        }\n        .aiper-toolkit-wrapper .aiper-dim-group {\n            flex: 1 1 100px;\n            min-width: 80px;\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n        .aiper-toolkit-wrapper .aiper-dim-label {\n            font-size: 0.75rem;\n            font-weight: 600;\n            color: var(--aiper-subtle);\n            text-transform: uppercase;\n            letter-spacing: 0.03em;\n        }\n        .aiper-toolkit-wrapper .aiper-dim-input {\n            padding: 10px 12px;\n            border: 1px solid var(--aiper-border);\n            border-radius: var(--aiper-radius-sm);\n            font-size: 0.9rem;\n            color: var(--aiper-dark);\n            background: var(--aiper-white);\n            transition: var(--aiper-transition);\n            outline: none;\n            font-family: inherit;\n            width: 100%;\n            -moz-appearance: textfield;\n        }\n        .aiper-toolkit-wrapper .aiper-dim-input::-webkit-inner-spin-button,\n        .aiper-toolkit-wrapper .aiper-dim-input::-webkit-outer-spin-button {\n            opacity: 1;\n            height: 30px;\n        }\n        .aiper-toolkit-wrapper .aiper-dim-input:focus {\n            border-color: var(--aiper-teal);\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.1);\n        }\n        .aiper-toolkit-wrapper .aiper-dim-input:invalid {\n            border-color: var(--aiper-error);\n        }\n        .aiper-toolkit-wrapper .aiper-dim-unit {\n            font-size: 0.75rem;\n            color: var(--aiper-subtle);\n            font-weight: 500;\n        }\n\n        \/* Bot\u00f3n A\u00f1adir zona *\/\n        .aiper-toolkit-wrapper .aiper-add-area-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 10px 18px;\n            border: 2px dashed var(--aiper-border);\n            border-radius: var(--aiper-radius-sm);\n            background: transparent;\n            color: var(--aiper-subtle);\n            cursor: pointer;\n            font-size: 0.875rem;\n            font-weight: 600;\n            transition: var(--aiper-transition);\n            margin-bottom: 20px;\n            font-family: inherit;\n            outline: none;\n        }\n        .aiper-toolkit-wrapper .aiper-add-area-btn:hover {\n            border-color: var(--aiper-teal);\n            color: var(--aiper-teal);\n            background: rgba(30, 202, 211, 0.03);\n        }\n        .aiper-toolkit-wrapper .aiper-add-area-btn:focus-visible {\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.2);\n        }\n        .aiper-toolkit-wrapper .aiper-add-area-btn:disabled {\n            opacity: 0.4;\n            cursor: not-allowed;\n            pointer-events: none;\n            border-color: var(--aiper-border);\n            color: #c4c9d0;\n        }\n        .aiper-toolkit-wrapper .aiper-add-icon {\n            font-size: 1.2rem;\n            line-height: 1;\n            font-weight: 700;\n        }\n\n        \/* Secci\u00f3n Profundidad *\/\n        .aiper-toolkit-wrapper .aiper-depth-section {\n            background: var(--aiper-bg);\n            border: 1px solid var(--aiper-border);\n            border-radius: var(--aiper-radius);\n            padding: 16px 18px;\n            margin-bottom: 20px;\n            box-shadow: var(--aiper-shadow);\n        }\n        .aiper-toolkit-wrapper .aiper-depth-row {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-input-group {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            flex: 1 1 auto;\n            min-width: 140px;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-input {\n            padding: 10px 14px;\n            border: 1px solid var(--aiper-border);\n            border-radius: var(--aiper-radius-sm);\n            font-size: 0.95rem;\n            color: var(--aiper-dark);\n            background: var(--aiper-white);\n            width: 90px;\n            text-align: center;\n            transition: var(--aiper-transition);\n            outline: none;\n            font-family: inherit;\n            -moz-appearance: textfield;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-input::-webkit-inner-spin-button,\n        .aiper-toolkit-wrapper .aiper-depth-input::-webkit-outer-spin-button {\n            opacity: 1;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-input:focus {\n            border-color: var(--aiper-teal);\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.1);\n        }\n        .aiper-toolkit-wrapper .aiper-depth-unit {\n            font-weight: 600;\n            color: var(--aiper-dark);\n            font-size: 0.9rem;\n            white-space: nowrap;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-presets {\n            display: flex;\n            gap: 8px;\n            flex-wrap: wrap;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-preset-btn {\n            padding: 7px 14px;\n            border: 1px solid var(--aiper-border);\n            border-radius: 20px;\n            background: var(--aiper-white);\n            cursor: pointer;\n            font-size: 0.8rem;\n            font-weight: 600;\n            color: var(--aiper-subtle);\n            transition: var(--aiper-transition);\n            white-space: nowrap;\n            font-family: inherit;\n            outline: none;\n        }\n        .aiper-toolkit-wrapper .aiper-depth-preset-btn:hover {\n            border-color: var(--aiper-teal);\n            color: var(--aiper-teal);\n            background: rgba(30, 202, 211, 0.04);\n        }\n        .aiper-toolkit-wrapper .aiper-depth-preset-btn.active-preset {\n            background: var(--aiper-gradient);\n            color: #fff;\n            border-color: transparent;\n            box-shadow: var(--aiper-shadow);\n        }\n        .aiper-toolkit-wrapper .aiper-depth-preset-btn:focus-visible {\n            box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.25);\n        }\n        .aiper-toolkit-wrapper .aiper-depth-preset-desc {\n            font-size: 0.7rem;\n            color: var(--aiper-subtle);\n            margin-top: 6px;\n            font-style: italic;\n            min-height: 18px;\n        }\n\n        \/* Botones de acci\u00f3n *\/\n        .aiper-toolkit-wrapper .aiper-action-row {\n            display: flex;\n            gap: 12px;\n            flex-wrap: wrap;\n            margin-bottom: 20px;\n        }\n        .aiper-toolkit-wrapper .aiper-btn {\n            padding: 13px 28px;\n            border: none;\n            border-radius: 30px;\n            font-size: 0.95rem;\n            font-weight: 700;\n            cursor: pointer;\n            transition: var(--aiper-transition);\n            letter-spacing: 0.02em;\n            font-family: inherit;\n            outline: none;\n            position: relative;\n            overflow: hidden;\n        }\n        .aiper-toolkit-wrapper .aiper-btn-calculate {\n            background: var(--aiper-gradient);\n            color: #fff;\n            flex: 1 1 auto;\n            min-width: 160px;\n            box-shadow: 0 4px 14px rgba(30, 202, 211, 0.3);\n        }\n        .aiper-toolkit-wrapper .aiper-btn-calculate:hover {\n            background: var(--aiper-gradient-hover);\n            box-shadow: 0 6px 20px rgba(30, 202, 211, 0.4);\n            transform: translateY(-1px);\n        }\n        .aiper-toolkit-wrapper .aiper-btn-calculate:active {\n            transform: translateY(0);\n            box-shadow: 0 2px 8px rgba(30, 202, 211, 0.25);\n        }\n        .aiper-toolkit-wrapper .aiper-btn-calculate:focus-visible {\n            box-shadow: 0 0 0 4px rgba(30, 202, 211, 0.35);\n        }\n        .aiper-toolkit-wrapper .aiper-btn-reset {\n            background: var(--aiper-white);\n            color: var(--aiper-dark);\n            border: 2px solid var(--aiper-border);\n            flex: 0 0 auto;\n            min-width: 100px;\n        }\n        .aiper-toolkit-wrapper .aiper-btn-reset:hover {\n            border-color: #9ca3af;\n            background: #f9fafb;\n        }\n        .aiper-toolkit-wrapper .aiper-btn-reset:focus-visible {\n            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n        }\n\n        \/* Secci\u00f3n Resultados *\/\n        .aiper-toolkit-wrapper .aiper-output-section {\n            max-height: 0;\n            opacity: 0;\n            overflow: hidden;\n            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin 0.4s ease;\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n        .aiper-toolkit-wrapper .aiper-output-section.visible {\n            max-height: 800px;\n            opacity: 1;\n            margin-top: 8px;\n            margin-bottom: 20px;\n        }\n        .aiper-toolkit-wrapper .aiper-output-inner {\n            background: #f0fdfa;\n            border: 1px solid #bae6e0;\n            border-radius: var(--aiper-radius);\n            padding: 20px 22px;\n            box-shadow: var(--aiper-shadow);\n        }\n        .aiper-toolkit-wrapper .aiper-output-title {\n            font-size: 1rem;\n            font-weight: 700;\n            color: #0f766e;\n            margin: 0 0 14px 0;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .aiper-toolkit-wrapper .aiper-output-title::before {\n            content: '\\2713';\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 26px;\n            height: 26px;\n            border-radius: 50%;\n            background: #10b981;\n            color: #fff;\n            font-size: 0.8rem;\n            font-weight: 700;\n        }\n        .aiper-toolkit-wrapper .aiper-output-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 12px;\n        }\n        .aiper-toolkit-wrapper .aiper-output-card {\n            background: #fff;\n            border-radius: var(--aiper-radius-sm);\n            padding: 14px 16px;\n            text-align: center;\n            border: 1px solid #e5f3f1;\n            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);\n        }\n        .aiper-toolkit-wrapper .aiper-output-value {\n            font-size: 1.6rem;\n            font-weight: 800;\n            color: var(--aiper-dark);\n            line-height: 1.2;\n        }\n        .aiper-toolkit-wrapper .aiper-output-label {\n            font-size: 0.75rem;\n            color: var(--aiper-subtle);\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.03em;\n            margin-top: 2px;\n        }\n        .aiper-toolkit-wrapper .aiper-output-note {\n            font-size: 0.78rem;\n            color: #6b7280;\n            margin-top: 10px;\n            font-style: italic;\n            border-top: 1px solid #e5f3f1;\n            padding-top: 10px;\n        }\n        .aiper-toolkit-wrapper .aiper-output-area-breakdown {\n            font-size: 0.8rem;\n            color: #4b5563;\n            margin-bottom: 10px;\n            line-height: 1.5;\n        }\n        .aiper-toolkit-wrapper .aiper-output-area-breakdown span {\n            font-weight: 600;\n            color: var(--aiper-dark);\n        }\n\n        \/* Mensaje de validaci\u00f3n *\/\n        .aiper-toolkit-wrapper .aiper-validation-msg {\n            color: #ef4444;\n            font-size: 0.82rem;\n            font-weight: 600;\n            margin-top: 6px;\n            min-height: 20px;\n            transition: var(--aiper-transition);\n        }\n\n        \/* Responsive *\/\n        @container (max-width: 480px) {\n            .aiper-toolkit-wrapper .aiper-region-btn {\n                padding: 8px 14px;\n                font-size: 0.8rem;\n            }\n            .aiper-toolkit-wrapper .aiper-dims-row {\n                flex-direction: column;\n                gap: 8px;\n            }\n            .aiper-toolkit-wrapper .aiper-action-row {\n                flex-direction: column;\n            }\n            .aiper-toolkit-wrapper .aiper-btn {\n                width: 100%;\n                text-align: center;\n            }\n            .aiper-toolkit-wrapper .aiper-output-grid {\n                grid-template-columns: 1fr 1fr;\n                gap: 8px;\n            }\n            .aiper-toolkit-wrapper .aiper-output-value {\n                font-size: 1.3rem;\n            }\n            .aiper-toolkit-wrapper .aiper-depth-presets {\n                width: 100%;\n                justify-content: flex-start;\n            }\n            .aiper-toolkit-wrapper .aiper-depth-preset-btn {\n                font-size: 0.72rem;\n                padding: 6px 10px;\n            }\n        }\n        @media (max-width: 400px) {\n            .aiper-toolkit-wrapper {\n                padding: 16px 10px 14px;\n            }\n            .aiper-toolkit-wrapper .aiper-output-grid {\n                grid-template-columns: 1fr;\n            }\n            .aiper-toolkit-wrapper .aiper-region-btn {\n                padding: 7px 10px;\n                font-size: 0.72rem;\n            }\n            .aiper-toolkit-wrapper .aiper-area-card {\n                padding: 12px 10px 10px;\n            }\n            .aiper-toolkit-wrapper .aiper-shape-select {\n                font-size: 0.8rem;\n                padding: 7px 28px 7px 10px;\n            }\n        }\n    <\/style>\n\n    <!-- Selector de regi\u00f3n -->\n    <div class=\"aiper-region-toggle-wrap\">\n        <span class=\"aiper-region-label\">Unidades:<\/span>\n        <div class=\"aiper-region-toggle\" role=\"radiogroup\" aria-label=\"Sistema de unidades\">\n            <button class=\"aiper-region-btn active\" data-region=\"imperial\" role=\"radio\" aria-checked=\"true\" id=\"region-imp\">\n                Imperial (ft, pulg, yd\u00b3)\n            <\/button>\n            <button class=\"aiper-region-btn\" data-region=\"metric\" role=\"radio\" aria-checked=\"false\" id=\"region-met\">\n                M\u00e9trico (m, cm, m\u00b3)\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Contenedor de zonas -->\n    <p class=\"aiper-section-title\">Zonas a cubrir con mantillo<\/p>\n    <div class=\"aiper-areas-container\" id=\"aiper-areas-container\">\n        <!-- Generado din\u00e1micamente -->\n    <\/div>\n    <button class=\"aiper-add-area-btn\" id=\"aiper-add-area-btn\" type=\"button\">\n        <span class=\"aiper-add-icon\">+<\/span> A\u00f1adir otra zona\n    <\/button>\n    <p style=\"font-size:0.72rem;color:#9ca3af;margin:-8px 0 14px 0;\">Hasta 5 zonas separadas<\/p>\n\n    <!-- Secci\u00f3n Profundidad -->\n    <div class=\"aiper-depth-section\">\n        <p class=\"aiper-section-title\" style=\"margin-bottom:8px;\">Profundidad del mantillo<\/p>\n        <div class=\"aiper-depth-row\">\n            <div class=\"aiper-depth-input-group\">\n                <input type=\"number\" class=\"aiper-depth-input\" id=\"aiper-depth-input\" value=\"\" min=\"0.1\" step=\"any\" placeholder=\"3\" aria-label=\"Profundidad del mantillo\">\n                <span class=\"aiper-depth-unit\" id=\"aiper-depth-unit-label\">pulgadas<\/span>\n            <\/div>\n            <div class=\"aiper-depth-presets\" id=\"aiper-depth-presets\">\n                <!-- Generado din\u00e1micamente -->\n            <\/div>\n        <\/div>\n        <p class=\"aiper-depth-preset-desc\" id=\"aiper-depth-preset-desc\"><\/p>\n    <\/div>\n\n    <!-- Botones de acci\u00f3n -->\n    <div class=\"aiper-action-row\">\n        <button class=\"aiper-btn aiper-btn-calculate\" id=\"aiper-btn-calculate\" type=\"button\">Calcular mantillo<\/button>\n        <button class=\"aiper-btn aiper-btn-reset\" id=\"aiper-btn-reset\" type=\"button\">Restablecer<\/button>\n    <\/div>\n    <p class=\"aiper-validation-msg\" id=\"aiper-validation-msg\"><\/p>\n\n    <!-- Secci\u00f3n Resultados -->\n    <div class=\"aiper-output-section\" id=\"aiper-output-section\">\n        <div class=\"aiper-output-inner\">\n            <p class=\"aiper-output-title\">Resultados<\/p>\n            <div class=\"aiper-output-area-breakdown\" id=\"aiper-output-breakdown\"><\/div>\n            <div class=\"aiper-output-grid\" id=\"aiper-output-grid\">\n                <!-- Generado din\u00e1micamente -->\n            <\/div>\n            <p class=\"aiper-output-note\" id=\"aiper-output-note\"><\/p>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            const wrapper = document.querySelector('.aiper-toolkit-wrapper');\n            if (!wrapper) return;\n\n            const regionBtns = wrapper.querySelectorAll('.aiper-region-btn');\n            const areasContainer = wrapper.querySelector('#aiper-areas-container');\n            const addAreaBtn = wrapper.querySelector('#aiper-add-area-btn');\n            const depthInput = wrapper.querySelector('#aiper-depth-input');\n            const depthUnitLabel = wrapper.querySelector('#aiper-depth-unit-label');\n            const depthPresetsContainer = wrapper.querySelector('#aiper-depth-presets');\n            const depthPresetDesc = wrapper.querySelector('#aiper-depth-preset-desc');\n            const btnCalculate = wrapper.querySelector('#aiper-btn-calculate');\n            const btnReset = wrapper.querySelector('#aiper-btn-reset');\n            const validationMsg = wrapper.querySelector('#aiper-validation-msg');\n            const outputSection = wrapper.querySelector('#aiper-output-section');\n            const outputBreakdown = wrapper.querySelector('#aiper-output-breakdown');\n            const outputGrid = wrapper.querySelector('#aiper-output-grid');\n            const outputNote = wrapper.querySelector('#aiper-output-note');\n\n            const MAX_AREAS = 5;\n            let state = {\n                region: 'imperial',\n                areas: [{ id: 0, label: '', shape: 'rectangle', length: '', width: '', diameter: '' }],\n                depth: '',\n            };\n            let nextId = 1;\n\n            const presetsImperial = [\n                { value: 2, label: '2 pulg', desc: 'Cobertura ligera' },\n                { value: 3, label: '3 pulg', desc: 'Supresi\u00f3n de malas hierbas \u2013 Recomendado' },\n                { value: 4, label: '4 pulg', desc: 'Acolchado grueso' },\n            ];\n            const presetsMetric = [\n                { value: 5, label: '5 cm', desc: 'Cobertura ligera' },\n                { value: 7.5, label: '7,5 cm', desc: 'Supresi\u00f3n de malas hierbas \u2013 Recomendado' },\n                { value: 10, label: '10 cm', desc: 'Acolchado grueso' },\n            ];\n\n            function getPresets() {\n                return state.region === 'imperial' ? presetsImperial : presetsMetric;\n            }\n\n            function getDepthUnit() {\n                return state.region === 'imperial' ? 'pulgadas' : 'cm';\n            }\n\n            function getDimUnit() {\n                return state.region === 'imperial' ? 'ft' : 'm';\n            }\n\n            function getDimUnitLong() {\n                return state.region === 'imperial' ? 'pies' : 'metros';\n            }\n\n            function getAreaUnit() {\n                return state.region === 'imperial' ? 'sq ft' : 'm\u00b2';\n            }\n\n            function ftToM(ft) { return ft * 0.3048; }\n            function mToFt(m) { return m \/ 0.3048; }\n            function inToCm(inch) { return inch * 2.54; }\n            function cmToIn(cm) { return cm \/ 2.54; }\n            function round2(n) { return Math.round(n * 100) \/ 100; }\n            function round4(n) { return Math.round(n * 10000) \/ 10000; }\n\n            function depthNear(depth, target) {\n                if (depth === '') return false;\n                var _dn = parseFloat(depth);\n                if (isNaN(_dn)) return false;\n                return Math.abs(_dn - target) < 0.001;\n            }\n\n            function convertAllValues(fromRegion, toRegion) {\n                var _cd = parseFloat(state.depth);\n                if (state.depth !== '') {\n                    if (!isNaN(_cd)) {\n                        if (_cd > 0) {\n                            if (fromRegion === 'imperial') {\n                                if (toRegion === 'metric') { state.depth = round2(inToCm(_cd)); }\n                            } else if (fromRegion === 'metric') {\n                                if (toRegion === 'imperial') { state.depth = round2(cmToIn(_cd)); }\n                            }\n                        }\n                    }\n                }\n                state.areas.forEach(area => {\n                    var _l = parseFloat(area.length);\n                    if (area.length !== '') {\n                        if (!isNaN(_l)) {\n                            if (_l > 0) {\n                                if (fromRegion === 'imperial') {\n                                    if (toRegion === 'metric') { area.length = round2(ftToM(_l)); }\n                                } else if (fromRegion === 'metric') {\n                                    if (toRegion === 'imperial') { area.length = round2(mToFt(_l)); }\n                                }\n                            }\n                        }\n                    }\n                    var _w = parseFloat(area.width);\n                    if (area.width !== '') {\n                        if (!isNaN(_w)) {\n                            if (_w > 0) {\n                                if (fromRegion === 'imperial') {\n                                    if (toRegion === 'metric') { area.width = round2(ftToM(_w)); }\n                                } else if (fromRegion === 'metric') {\n                                    if (toRegion === 'imperial') { area.width = round2(mToFt(_w)); }\n                                }\n                            }\n                        }\n                    }\n                    var _dd = parseFloat(area.diameter);\n                    if (area.diameter !== '') {\n                        if (!isNaN(_dd)) {\n                            if (_dd > 0) {\n                                if (fromRegion === 'imperial') {\n                                    if (toRegion === 'metric') { area.diameter = round2(ftToM(_dd)); }\n                                } else if (fromRegion === 'metric') {\n                                    if (toRegion === 'imperial') { area.diameter = round2(mToFt(_dd)); }\n                                }\n                            }\n                        }\n                    }\n                });\n            }\n\n            function renderRegionToggle() {\n                regionBtns.forEach(btn => {\n                    const isActive = btn.getAttribute('data-region') === state.region;\n                    btn.classList.toggle('active', isActive);\n                    btn.setAttribute('aria-checked', isActive ? 'true' : 'false');\n                });\n            }\n\n            function renderDepthPresets() {\n                const presets = getPresets();\n                depthPresetsContainer.innerHTML = '';\n                presets.forEach((p) => {\n                    const btn = document.createElement('button');\n                    btn.type = 'button';\n                    btn.className = 'aiper-depth-preset-btn';\n                    btn.textContent = p.label;\n                    btn.setAttribute('data-value', p.value);\n                    btn.setAttribute('data-desc', p.desc);\n                    const currentDepth = parseFloat(state.depth);\n                    if (depthNear(state.depth, p.value)) {\n                        btn.classList.add('active-preset');\n                        depthPresetDesc.textContent = p.desc;\n                    }\n                    btn.addEventListener('click', () => {\n                        state.depth = p.value;\n                        depthInput.value = p.value;\n                        updatePresetActiveState();\n                        clearResults();\n                    });\n                    depthPresetsContainer.appendChild(btn);\n                });\n                updatePresetActiveState();\n                depthUnitLabel.textContent = getDepthUnit();\n                depthInput.placeholder = state.region === 'imperial' ? '3' : '7.5';\n            }\n\n            function updatePresetActiveState() {\n                const presets = getPresets();\n                const currentDepth = parseFloat(state.depth);\n                const buttons = depthPresetsContainer.querySelectorAll('.aiper-depth-preset-btn');\n                buttons.forEach(btn => {\n                    const val = parseFloat(btn.getAttribute('data-value'));\n                    const isActive = depthNear(state.depth, val);\n                    btn.classList.toggle('active-preset', isActive);\n                    if (isActive) {\n                        depthPresetDesc.textContent = btn.getAttribute('data-desc');\n                    }\n                });\n                if (![...buttons].some(b => b.classList.contains('active-preset'))) {\n                    depthPresetDesc.textContent = '';\n                }\n            }\n\n            function renderAreaCards() {\n                areasContainer.innerHTML = '';\n                state.areas.forEach((area, index) => {\n                    const card = createAreaCard(area, index);\n                    areasContainer.appendChild(card);\n                });\n                updateAddAreaButton();\n                updateRemoveButtons();\n            }\n\n            function createAreaCard(area, index) {\n                const card = document.createElement('div');\n                card.className = 'aiper-area-card';\n                card.setAttribute('data-area-index', index);\n\n                const dimUnit = getDimUnit();\n                const isCircle = area.shape === 'circle';\n\n                const header = document.createElement('div');\n                header.className = 'aiper-area-card-header';\n                const numSpan = document.createElement('span');\n                numSpan.className = 'aiper-area-number';\n                numSpan.textContent = index + 1;\n                header.appendChild(numSpan);\n\n                const labelInput = document.createElement('input');\n                labelInput.type = 'text';\n                labelInput.className = 'aiper-area-label-input';\n                labelInput.placeholder = 'Nombre de la zona (opcional) \u2013 ej. \"Patio delantero\"';\n                labelInput.value = area.label;\n                labelInput.addEventListener('input', (e) => {\n                    state.areas[index].label = e.target.value;\n                });\n                header.appendChild(labelInput);\n\n                const removeBtn = document.createElement('button');\n                removeBtn.type = 'button';\n                removeBtn.className = 'aiper-area-remove-btn';\n                removeBtn.setAttribute('aria-label', 'Eliminar zona');\n                removeBtn.textContent = '\\u00D7';\n                removeBtn.addEventListener('click', () => removeArea(index));\n                header.appendChild(removeBtn);\n                card.appendChild(header);\n\n                const shapeRow = document.createElement('div');\n                shapeRow.className = 'aiper-shape-select-row';\n                const shapeLabel = document.createElement('span');\n                shapeLabel.className = 'aiper-shape-select-label';\n                shapeLabel.textContent = 'Forma:';\n                shapeRow.appendChild(shapeLabel);\n                const shapeSelect = document.createElement('select');\n                shapeSelect.className = 'aiper-shape-select';\n                shapeSelect.innerHTML = '\\n                    <option value=\"rectangle\" ' + (area.shape === 'rectangle' ? 'selected' : '') + '>Rect\u00e1ngulo \/ Cuadrado<\/option>\\n                    <option value=\"circle\" ' + (area.shape === 'circle' ? 'selected' : '') + '>C\u00edrculo<\/option>\\n                ';\n                shapeSelect.addEventListener('change', (e) => {\n                    state.areas[index].shape = e.target.value;\n                    if (e.target.value === 'circle') {\n                        state.areas[index].length = '';\n                        state.areas[index].width = '';\n                    } else {\n                        state.areas[index].diameter = '';\n                    }\n                    renderAreaCards();\n                    clearResults();\n                });\n                shapeRow.appendChild(shapeSelect);\n                card.appendChild(shapeRow);\n\n                const dimsRow = document.createElement('div');\n                dimsRow.className = 'aiper-dims-row';\n\n                if (isCircle) {\n                    const diamGroup = document.createElement('div');\n                    diamGroup.className = 'aiper-dim-group';\n                    const diamLabel = document.createElement('label');\n                    diamLabel.className = 'aiper-dim-label';\n                    diamLabel.textContent = 'Di\u00e1metro (' + dimUnit + ')';\n                    diamGroup.appendChild(diamLabel);\n                    const diamInput = document.createElement('input');\n                    diamInput.type = 'number';\n                    diamInput.className = 'aiper-dim-input';\n                    diamInput.min = '0';\n                    diamInput.step = 'any';\n                    diamInput.placeholder = 'ej. 6';\n                    diamInput.value = area.diameter;\n                    diamInput.addEventListener('input', (e) => {\n                        state.areas[index].diameter = e.target.value;\n                        clearResults();\n                    });\n                    diamGroup.appendChild(diamInput);\n                    dimsRow.appendChild(diamGroup);\n                } else {\n                    const lenGroup = document.createElement('div');\n                    lenGroup.className = 'aiper-dim-group';\n                    const lenLabel = document.createElement('label');\n                    lenLabel.className = 'aiper-dim-label';\n                    lenLabel.textContent = 'Largo (' + dimUnit + ')';\n                    lenGroup.appendChild(lenLabel);\n                    const lenInput = document.createElement('input');\n                    lenInput.type = 'number';\n                    lenInput.className = 'aiper-dim-input';\n                    lenInput.min = '0';\n                    lenInput.step = 'any';\n                    lenInput.placeholder = 'ej. 20';\n                    lenInput.value = area.length;\n                    lenInput.addEventListener('input', (e) => {\n                        state.areas[index].length = e.target.value;\n                        clearResults();\n                    });\n                    lenGroup.appendChild(lenInput);\n                    dimsRow.appendChild(lenGroup);\n\n                    const widGroup = document.createElement('div');\n                    widGroup.className = 'aiper-dim-group';\n                    const widLabel = document.createElement('label');\n                    widLabel.className = 'aiper-dim-label';\n                    widLabel.textContent = 'Ancho (' + dimUnit + ')';\n                    widGroup.appendChild(widLabel);\n                    const widInput = document.createElement('input');\n                    widInput.type = 'number';\n                    widInput.className = 'aiper-dim-input';\n                    widInput.min = '0';\n                    widInput.step = 'any';\n                    widInput.placeholder = 'ej. 15';\n                    widInput.value = area.width;\n                    widInput.addEventListener('input', (e) => {\n                        state.areas[index].width = e.target.value;\n                        clearResults();\n                    });\n                    widGroup.appendChild(widInput);\n                    dimsRow.appendChild(widGroup);\n                }\n                card.appendChild(dimsRow);\n\n                return card;\n            }\n\n            function updateAddAreaButton() {\n                if (state.areas.length >= MAX_AREAS) {\n                    addAreaBtn.disabled = true;\n                    addAreaBtn.textContent = 'M\u00e1ximo de 5 zonas alcanzado';\n                } else {\n                    addAreaBtn.disabled = false;\n                    addAreaBtn.innerHTML = '<span class=\"aiper-add-icon\">+<\/span> A\u00f1adir otra zona';\n                }\n            }\n\n            function updateRemoveButtons() {\n                const removeBtns = areasContainer.querySelectorAll('.aiper-area-remove-btn');\n                removeBtns.forEach(btn => {\n                    if (state.areas.length <= 1) {\n                        btn.disabled = true;\n                        btn.style.opacity = '0.3';\n                        btn.style.cursor = 'not-allowed';\n                        btn.style.pointerEvents = 'none';\n                    } else {\n                        btn.disabled = false;\n                        btn.style.opacity = '1';\n                        btn.style.cursor = 'pointer';\n                        btn.style.pointerEvents = 'auto';\n                    }\n                });\n            }\n\n            function addArea() {\n                if (state.areas.length >= MAX_AREAS) return;\n                state.areas.push({ id: nextId++, label: '', shape: 'rectangle', length: '', width: '', diameter: '' });\n                renderAreaCards();\n                clearResults();\n            }\n\n            function removeArea(index) {\n                if (state.areas.length <= 1) return;\n                state.areas.splice(index, 1);\n                renderAreaCards();\n                clearResults();\n            }\n\n            function getAreaSquareUnits(area) {\n                if (area.shape === 'circle') {\n                    const d = parseFloat(area.diameter);\n                    if (isNaN(d) || d <= 0) return NaN;\n                    const r = d \/ 2;\n                    return Math.PI * r * r;\n                } else {\n                    const l = parseFloat(area.length);\n                    const w = parseFloat(area.width);\n                    if (isNaN(l) || l <= 0 || isNaN(w) || w <= 0) return NaN;\n                    return l * w;\n                }\n            }\n\n            function validateAll() {\n                const errors = [];\n                if (state.areas.length === 0) {\n                    errors.push('Por favor, a\u00f1ada al menos una zona.');\n                }\n                let allAreasValid = true;\n                state.areas.forEach((area, i) => {\n                    const areaVal = getAreaSquareUnits(area);\n                    if (isNaN(areaVal) || areaVal <= 0) {\n                        allAreasValid = false;\n                        const label = area.label || 'Zona ' + (i + 1);\n                        if (area.shape === 'circle') {\n                            errors.push('\"' + label + '\": Ingrese un di\u00e1metro v\u00e1lido.');\n                        } else {\n                            errors.push('\"' + label + '\": Ingrese un largo y ancho v\u00e1lidos.');\n                        }\n                    }\n                });\n                const d = parseFloat(state.depth);\n                if (isNaN(d) || d <= 0) {\n                    errors.push('Ingrese una profundidad de mantillo v\u00e1lida.');\n                }\n                return { valid: errors.length === 0, errors };\n            }\n\n            function calculate() {\n                const validation = validateAll();\n                if (!validation.valid) {\n                    validationMsg.textContent = validation.errors.join(' ');\n                    outputSection.classList.remove('visible');\n                    return;\n                }\n                validationMsg.textContent = '';\n\n                const depth = parseFloat(state.depth);\n                let totalArea = 0;\n                const areaDetails = [];\n\n                state.areas.forEach((area, i) => {\n                    const a = getAreaSquareUnits(area);\n                    totalArea += a;\n                    areaDetails.push({\n                        label: area.label || 'Zona ' + (i + 1),\n                        area: a,\n                        shape: area.shape,\n                    });\n                });\n\n                let bulkVolume;\n                let bulkLabel;\n                let bagResults = [];\n                let totalLiters = null;\n\n                if (state.region === 'imperial') {\n                    const cubicFeet = totalArea * (depth \/ 12);\n                    const cubicYards = cubicFeet \/ 27;\n                    bulkVolume = round2(cubicYards);\n                    bulkLabel = 'Yardas c\u00fabicas (a granel)';\n                    const bags2cf = Math.ceil(cubicFeet \/ 2);\n                    const bags3cf = Math.ceil(cubicFeet \/ 3);\n                    bagResults = [\n                        { value: bags2cf, label: 'Sacos (2 pies\u00b3 cada uno)' },\n                        { value: bags3cf, label: 'Sacos (3 pies\u00b3 cada uno)' },\n                    ];\n                    totalLiters = round2(cubicFeet * 28.3168466);\n                } else {\n                    const cubicMeters = totalArea * (depth \/ 100);\n                    bulkVolume = round2(cubicMeters);\n                    bulkLabel = 'Metros c\u00fabicos (a granel)';\n                    totalLiters = round2(cubicMeters * 1000);\n                    const bags50L = Math.ceil(totalLiters \/ 50);\n                    bagResults = [\n                        { value: bags50L, label: 'Sacos (50 litros cada uno)' },\n                    ];\n                }\n\n                const areaUnit = getAreaUnit();\n                let breakdownHTML = '';\n                areaDetails.forEach(ad => {\n                    const shapeSpanish = ad.shape === 'circle' ? 'C\u00edrculo' : 'Rect\u00e1ngulo';\n                    breakdownHTML += '<span>' + ad.label + '<\/span>: ' + round2(ad.area) + ' ' + areaUnit + ' (' + shapeSpanish + ') &nbsp;|&nbsp; ';\n                });\n                breakdownHTML = breakdownHTML.replace(\/\\|&nbsp;\\s*$\/, '');\n                outputBreakdown.innerHTML = '<strong>Superficie total:<\/strong> ' + round2(totalArea) + ' ' + areaUnit + ' &nbsp;(' + breakdownHTML.trim() + ')';\n\n                let gridHTML = '\\n                    <div class=\"aiper-output-card\">\\n                        <div class=\"aiper-output-value\">' + bulkVolume + '<\/div>\\n                        <div class=\"aiper-output-label\">' + bulkLabel + '<\/div>\\n                    <\/div>';\n                bagResults.forEach(br => {\n                    gridHTML += '\\n                    <div class=\"aiper-output-card\">\\n                        <div class=\"aiper-output-value\">' + br.value + '<\/div>\\n                        <div class=\"aiper-output-label\">' + br.label + '<\/div>\\n                    <\/div>';\n                });\n                if (state.region === 'imperial') {\n                    if (totalLiters !== null) {\n                        gridHTML += '\\n                    <div class=\"aiper-output-card\">\\n                        <div class=\"aiper-output-value\">' + totalLiters + '<\/div>\\n                        <div class=\"aiper-output-label\">Litros totales (ref.)<\/div>\\n                    <\/div>';\n                    }\n                }\n                if (state.region === 'metric') {\n                    gridHTML += '\\n                    <div class=\"aiper-output-card\">\\n                        <div class=\"aiper-output-value\">' + totalLiters + '<\/div>\\n                        <div class=\"aiper-output-label\">Litros totales<\/div>\\n                    <\/div>';\n                }\n                outputGrid.innerHTML = gridHTML;\n\n                if (state.region === 'imperial') {\n                    outputNote.textContent = 'Sacos redondeados al entero superior. Volumen a granel mostrado en yardas c\u00fabicas. Litros de referencia proporcionados para comparaci\u00f3n internacional.';\n                } else {\n                    outputNote.textContent = 'Sacos redondeados al entero superior. Volumen a granel mostrado en metros c\u00fabicos y litros.';\n                }\n\n                outputSection.classList.add('visible');\n                outputSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n            }\n\n            function clearResults() {\n                outputSection.classList.remove('visible');\n                validationMsg.textContent = '';\n            }\n\n            function resetAll() {\n                state.areas = [{ id: 0, label: '', shape: 'rectangle', length: '', width: '', diameter: '' }];\n                state.depth = '';\n                nextId = 1;\n                depthInput.value = '';\n                depthPresetDesc.textContent = '';\n                renderAreaCards();\n                renderDepthPresets();\n                clearResults();\n                outputGrid.innerHTML = '';\n                outputBreakdown.innerHTML = '';\n                outputNote.textContent = '';\n                wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }\n\n            regionBtns.forEach(btn => {\n                btn.addEventListener('click', () => {\n                    const newRegion = btn.getAttribute('data-region');\n                    if (newRegion === state.region) return;\n                    const oldRegion = state.region;\n                    convertAllValues(oldRegion, newRegion);\n                    state.region = newRegion;\n                    renderRegionToggle();\n                    renderAreaCards();\n                    renderDepthPresets();\n                    depthInput.value = state.depth !== '' ? state.depth : '';\n                    clearResults();\n                });\n            });\n\n            addAreaBtn.addEventListener('click', addArea);\n\n            depthInput.addEventListener('input', () => {\n                const val = depthInput.value;\n                state.depth = val;\n                updatePresetActiveState();\n                clearResults();\n            });\n\n            depthInput.addEventListener('blur', () => {\n                const val = depthInput.value;\n                if (val === '') {\n                    state.depth = '';\n                } else {\n                    const num = parseFloat(val);\n                    state.depth = isNaN(num) ? '' : num;\n                }\n                updatePresetActiveState();\n            });\n\n            btnCalculate.addEventListener('click', calculate);\n            btnReset.addEventListener('click', resetAll);\n\n            renderRegionToggle();\n            renderAreaCards();\n            renderDepthPresets();\n            depthInput.value = '';\n            clearResults();\n\n            depthInput.addEventListener('keydown', (e) => {\n                if (e.key === 'Enter') {\n                    e.preventDefault();\n                    calculate();\n                }\n            });\n\n            areasContainer.addEventListener('keydown', (e) => {\n                if (e.key === 'Enter') {\n                    if (e.target.classList.contains('aiper-dim-input')) {\n                        e.preventDefault();\n                        calculate();\n                    }\n                }\n            });\n        })();\n    <\/script>\n<\/div>\n\n\n<!-- aiper-tool-links -->\n<div class=\"aiper-tool-links\">\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">M\u00e1s herramientas<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/es\/calculadora-cercas\/\" class=\"aiper-tl-tag\">Calculadora de materiales para cercas<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/es\/calculadora-de-adoquines\/\" class=\"aiper-tl-tag\">Calculadora de Adoquines<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/es\/calculadora-de-terrazas\/\" class=\"aiper-tl-tag\">Calculadora de Terrazas<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Art\u00edculos relacionados<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/es\/bajar-alcalinidad-piscina\/\" class=\"aiper-tl-tag\">C\u00f3mo bajar la alcalinidad de la piscina<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/es\/ahuyentar-gansos-canadienses-cesped\/\" class=\"aiper-tl-tag\">C\u00f3mo ahuyentar los gansos canadienses del c\u00e9sped<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/es\/como-eliminar-setas-del-cesped\/\" class=\"aiper-tl-tag\">C\u00f3mo eliminar las setas del c\u00e9sped<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/es\/escarificar-cesped-detectar-eliminar-fieltro\/\" class=\"aiper-tl-tag\">Escarificar el c\u00e9sped: c\u00f3mo detectar y eliminar el fieltro<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.aiper-tool-links{margin:2.5rem 0 1.5rem;padding:1.5rem 1.75rem;background:linear-gradient(135deg,rgba(148,134,247,.04),rgba(30,202,211,.04));border-radius:12px;border:1px solid rgba(148,134,247,.10)}\n.aiper-tl-section{margin-bottom:1.25rem}\n.aiper-tl-section:last-child{margin-bottom:0}\n.aiper-tl-heading{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8899aa;margin:0 0 .65rem}\n.aiper-tl-tags{display:flex;flex-wrap:wrap;gap:.5rem}\n.aiper-tl-tag{display:inline-block;padding:.4rem .95rem;font-size:.82rem;font-weight:500;line-height:1.35;color:#9486f7;background:rgba(148,134,247,.055);border:1px solid rgba(30,202,211,.25);border-radius:22px;text-decoration:none;transition:all .18s}\n.aiper-tl-tag:hover{background:#1ecad3;color:#fff;border-color:#1ecad3;box-shadow:0 2px 10px rgba(30,202,211,.22)}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>Unidades: Imperial (ft, pulg, yd\u00b3) M\u00e9trico (m, cm, m\u00b3) Zonas a cubrir con mantillo + A\u00f1adir otra zona Hasta 5 zonas separadas Profundidad del mantillo pulgadas Calcular mantillo Restablecer Resultados M\u00e1s herramientas Calculadora de materiales para cercas Calculadora de Adoquines Calculadora de Terrazas Art\u00edculos relacionados C\u00f3mo bajar la alcalinidad de la piscina C\u00f3mo ahuyentar los&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2529","page","type-page","status-publish","hentry"],"lang":"es","translations":{"es":2529,"en":2505,"de":2525,"fr":2527},"_links":{"self":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/comments?post=2529"}],"version-history":[{"count":2,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2529\/revisions"}],"predecessor-version":[{"id":4383,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2529\/revisions\/4383"}],"wp:attachment":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/media?parent=2529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}