{"id":57,"date":"2020-04-04T14:48:39","date_gmt":"2020-04-04T19:48:39","guid":{"rendered":"https:\/\/epaa.gob.ec\/wp\/?page_id=57"},"modified":"2026-05-05T11:00:22","modified_gmt":"2026-05-05T16:00:22","slug":"mision-y-vision","status":"publish","type":"page","link":"https:\/\/epaa.gob.ec\/wp\/?page_id=57","title":{"rendered":"Misi\u00f3n y Visi\u00f3n"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       VARIABLES CSS - Consistentes con Directorio\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    :root {\n        --epaa-primary: #274a82;\n        --epaa-primary-dark: #1e3a65;\n        --epaa-primary-light: #60a5fa;\n        --epaa-secondary: #546e7a;\n        --epaa-bg-light: #f8faff;\n        --epaa-bg-gradient-start: #f8faff;\n        --epaa-bg-gradient-end: #eff3f8;\n        --epaa-text-white: #ffffff;\n        --epaa-text-main: #2c3e50;\n        --epaa-text-body: #4a5568;\n        --epaa-text-muted: #718096;\n        --epaa-text-light: #a0aec0;\n        --epaa-border: #eef2f6;\n        --epaa-tag-bg: #e9f0f8;\n        --epaa-shadow-sm: 0 4px 15px rgba(39, 74, 130, 0.15);\n        --epaa-shadow-md: 0 10px 30px rgba(0,0,0,0.08);\n        --epaa-shadow-lg: 0 20px 40px rgba(0,0,0,0.12);\n        --epaa-radius: 20px;\n        --epaa-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       CONTENEDOR PRINCIPAL\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .epaa-mv-section {\n        font-family: 'Poppins', sans-serif;\n        max-width: 1200px;\n        margin: 0 auto;\n        padding: 40px 20px;\n        color: var(--epaa-text-main);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       HERO \/ IMAGEN DESTACADA\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .epaa-hero-img {\n        width: 100%;\n        height: 400px;\n        background: linear-gradient(135deg, var(--epaa-primary) 0%, var(--epaa-primary-dark) 50%, #0f2744 100%);\n        background-size: 400% 400%;\n        border-radius: var(--epaa-radius);\n        margin-bottom: 60px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n        box-shadow: var(--epaa-shadow-lg);\n        animation: gradientShift 15s ease infinite;\n    }\n\n    \/* Patr\u00f3n decorativo sutil *\/\n    .epaa-hero-img::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; right: 0; bottom: 0;\n        background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n        opacity: 0.5;\n    }\n\n    @keyframes gradientShift {\n        0% { background-position: 0% 50%; }\n        50% { background-position: 100% 50%; }\n        100% { background-position: 0% 50%; }\n    }\n\n    .epaa-hero-content {\n        position: relative;\n        z-index: 2;\n        padding: 20px;\n    }\n\n    .epaa-hero-img h1 {\n        font-size: 3em;\n        font-weight: 800;\n        margin-bottom: 10px;\n        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);\n        letter-spacing: -0.02em;\n    }\n\n    .epaa-hero-img p {\n        font-size: 1.3em;\n        font-weight: 300;\n        opacity: 0.9;\n        max-width: 500px;\n        margin: 0 auto;\n    }\n\n    \/* Icono decorativo en hero *\/\n    .epaa-hero-icon {\n        margin-bottom: 20px;\n        opacity: 0.8;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       GRID MISI\u00d3N Y VISI\u00d3N\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .epaa-mv-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n        gap: 30px;\n        margin-bottom: 60px;\n    }\n\n    .mv-card {\n        background: #fff;\n        padding: 45px 35px;\n        border-radius: var(--epaa-radius);\n        box-shadow: var(--epaa-shadow-md);\n        border-top: 6px solid var(--epaa-primary);\n        transition: var(--epaa-transition);\n        position: relative;\n        overflow: hidden;\n        will-change: transform;\n    }\n\n    .mv-card::before {\n        content: \"\";\n        position: absolute;\n        top: 0; left: 0; width: 100%; height: 100%;\n        background: linear-gradient(135deg, var(--epaa-primary) 0%, var(--epaa-primary-dark) 100%);\n        opacity: 0;\n        transition: opacity 0.4s ease;\n        z-index: 0;\n    }\n\n    .mv-card:hover {\n        transform: translateY(-8px);\n        box-shadow: var(--epaa-shadow-lg);\n    }\n\n    .mv-card:hover::before {\n        opacity: 1;\n    }\n\n    .mv-card:hover .mv-title,\n    .mv-card:hover p {\n        color: white;\n        position: relative;\n        z-index: 1;\n    }\n\n    .mv-card:hover .mv-title svg {\n        stroke: white;\n    }\n\n    .mv-title {\n        color: var(--epaa-primary);\n        font-weight: 700;\n        font-size: 1.6em;\n        margin-bottom: 20px;\n        display: flex;\n        align-items: center;\n        gap: 15px;\n        position: relative;\n        z-index: 1;\n        transition: color 0.3s ease;\n    }\n\n    .mv-title svg {\n        flex-shrink: 0;\n        stroke: var(--epaa-primary);\n        transition: stroke 0.3s ease;\n    }\n\n    .mv-card p {\n        color: var(--epaa-text-body);\n        line-height: 1.8;\n        font-size: 1.05em;\n        position: relative;\n        z-index: 1;\n        transition: color 0.3s ease;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SECCI\u00d3N DE VALORES\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .valores-titulo {\n        text-align: center;\n        color: var(--epaa-primary);\n        font-weight: 800;\n        margin-bottom: 50px;\n        font-size: 2.4em;\n        position: relative;\n        display: inline-block;\n        width: 100%;\n    }\n\n    .valores-titulo::after {\n        content: \"\";\n        display: block;\n        width: 80px;\n        height: 4px;\n        background: var(--epaa-primary);\n        margin: 15px auto 0;\n        border-radius: 2px;\n    }\n\n    .valores-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 25px;\n        text-align: center;\n    }\n\n    .valor-item {\n        padding: 35px 25px;\n        background: var(--epaa-bg-light);\n        border-radius: var(--epaa-radius);\n        transition: var(--epaa-transition);\n        border: 2px solid transparent;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .valor-item::before {\n        content: \"\";\n        position: absolute;\n        bottom: 0; left: 0; width: 100%; height: 0;\n        background: var(--epaa-primary);\n        transition: height 0.4s ease;\n        z-index: 0;\n    }\n\n    .valor-item:hover {\n        transform: translateY(-8px);\n        box-shadow: var(--epaa-shadow-lg);\n        border-color: var(--epaa-primary);\n    }\n\n    .valor-item:hover::before {\n        height: 100%;\n    }\n\n    .valor-item:hover .valor-icon svg,\n    .valor-item:hover h4,\n    .valor-item:hover p {\n        color: white;\n        stroke: white;\n        position: relative;\n        z-index: 1;\n    }\n\n    .valor-icon {\n        margin-bottom: 20px;\n        display: inline-block;\n        transition: transform 0.3s ease;\n    }\n\n    .valor-item:hover .valor-icon {\n        transform: scale(1.1) rotate(5deg);\n    }\n\n    .valor-icon svg {\n        stroke: var(--epaa-primary);\n        transition: stroke 0.3s ease;\n    }\n\n    .valor-item h4 {\n        font-weight: 700;\n        margin-bottom: 12px;\n        color: var(--epaa-text-main);\n        font-size: 1.2em;\n        position: relative;\n        z-index: 1;\n        transition: color 0.3s ease;\n    }\n\n    .valor-item p {\n        color: var(--epaa-text-muted);\n        font-size: 0.95em;\n        line-height: 1.6;\n        position: relative;\n        z-index: 1;\n        transition: color 0.3s ease;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       FOOTER\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .epaa-update-info {\n        text-align: center;\n        margin-top: 60px;\n        font-size: 0.85em;\n        color: var(--epaa-text-light);\n        border-top: 1px solid #edf2f7;\n        padding-top: 20px;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       ANIMACIONES DE ENTRADA\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @keyframes fadeInUp {\n        from { opacity: 0; transform: translateY(30px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    @keyframes fadeInScale {\n        from { opacity: 0; transform: scale(0.9); }\n        to { opacity: 1; transform: scale(1); }\n    }\n\n    .epaa-animate {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n\n    .epaa-animate.epaa-visible {\n        animation: fadeInUp 0.7s ease forwards;\n    }\n\n    .epaa-animate-scale {\n        opacity: 0;\n        transform: scale(0.9);\n    }\n\n    .epaa-animate-scale.epaa-visible {\n        animation: fadeInScale 0.6s ease forwards;\n    }\n\n    .epaa-delay-1 { animation-delay: 0.1s; }\n    .epaa-delay-2 { animation-delay: 0.2s; }\n    .epaa-delay-3 { animation-delay: 0.3s; }\n    .epaa-delay-4 { animation-delay: 0.4s; }\n    .epaa-delay-5 { animation-delay: 0.5s; }\n    .epaa-delay-6 { animation-delay: 0.6s; }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       RESPONSIVE COMPLETO\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @media (max-width: 1024px) {\n        .valores-grid { grid-template-columns: repeat(2, 1fr); }\n    }\n\n    @media (max-width: 768px) {\n        .epaa-hero-img { height: 300px; border-radius: 15px; }\n        .epaa-hero-img h1 { font-size: 2em; }\n        .epaa-hero-img p { font-size: 1em; }\n        \n        .epaa-mv-grid { grid-template-columns: 1fr; gap: 20px; }\n        .mv-card { padding: 30px 25px; }\n        \n        .valores-grid { grid-template-columns: 1fr; gap: 15px; }\n        .valor-item { padding: 25px 20px; }\n        \n        .valores-titulo { font-size: 1.8em; }\n    }\n\n    @media (max-width: 480px) {\n        .epaa-hero-img { height: 250px; }\n        .epaa-hero-img h1 { font-size: 1.6em; }\n        .mv-card { padding: 25px 20px; }\n        .mv-title { font-size: 1.3em; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MOVIMIENTO REDUCIDO\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @media (prefers-reduced-motion: reduce) {\n        .epaa-animate, .epaa-animate-scale, .mv-card, .valor-item, .epaa-hero-img {\n            animation: none !important;\n            transition: none !important;\n        }\n        .epaa-animate.epaa-visible, .epaa-animate-scale.epaa-visible {\n            opacity: 1;\n            transform: none;\n        }\n        .epaa-hero-img { animation: none; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       ESTILOS DE IMPRESI\u00d3N\n       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @media print {\n        .epaa-hero-img { height: 200px; background: var(--epaa-primary) !important; animation: none; }\n        .mv-card, .valor-item { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }\n        .mv-card::before, .valor-item::before { display: none; }\n        .epaa-mv-section { max-width: 100%; }\n    }\n<\/style>\n\n<div class=\"epaa-mv-section\">\n    \n    <!-- HERO -->\n    <header class=\"epaa-hero-img\" role=\"banner\">\n        <div class=\"epaa-hero-content\">\n            <div class=\"epaa-hero-icon\">\n                <!-- SVG: Gota de agua \/ Instituci\u00f3n -->\n                <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z\"\/>\n                    <path d=\"M12 22a8 8 0 0 0 8-8c0-3.5-2.5-6.5-8-12-5.5 5.5-8 8.5-8 12a8 8 0 0 0 8 8z\"\/>\n                <\/svg>\n            <\/div>\n            <h1>Nuestra Identidad<\/h1>\n            <p>Comprometidos con el bienestar de Antonio Ante<\/p>\n        <\/div>\n    <\/header>\n\n    <!-- MISI\u00d3N Y VISI\u00d3N -->\n    <div class=\"epaa-mv-grid\" role=\"list\">\n        \n        <article class=\"mv-card epaa-animate epaa-delay-1\" role=\"listitem\">\n            <h2 class=\"mv-title\">\n                <!-- SVG: Objetivo \/ Misi\u00f3n -->\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                    <circle cx=\"12\" cy=\"12\" r=\"6\"\/>\n                    <circle cx=\"12\" cy=\"12\" r=\"2\"\/>\n                <\/svg>\n                MISI\u00d3N\n            <\/h2>\n            <p>Dotar de los servicios de agua potable y alcantarillado con calidad, eficiencia e innovaci\u00f3n y de atenci\u00f3n inmediata con mejoras cont\u00ednuas, beneficiando a todos los hogares del cant\u00f3n Antonio Ante.<\/p>\n        <\/article>\n\n        <article class=\"mv-card epaa-animate epaa-delay-2\" role=\"listitem\">\n            <h2 class=\"mv-title\">\n                <!-- SVG: Cohete \/ Visi\u00f3n -->\n                <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/>\n                    <path d=\"M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/>\n                    <path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\/>\n                    <path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\/>\n                <\/svg>\n                VISI\u00d3N\n            <\/h2>\n            <p>Ser una empresa referente a nivel provincial en la optimizaci\u00f3n del modelo de gesti\u00f3n del recurso h\u00eddrico y de alcantarillado, a trav\u00e9s de la prestaci\u00f3n de servicios \u00e1giles, oportunos, cont\u00ednuos y de calidad, en beneficio de todos los habitantes del cant\u00f3n Antonio Ante.<\/p>\n        <\/article>\n\n    <\/div>\n\n    <!-- VALORES -->\n    <h2 class=\"valores-titulo epaa-animate\">Nuestros Valores<\/h2>\n    \n    <div class=\"valores-grid\" role=\"list\">\n        \n        <article class=\"valor-item epaa-animate-scale epaa-delay-3\" role=\"listitem\">\n            <div class=\"valor-icon\">\n                <!-- SVG: Calidad \/ Check -->\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/>\n                    <polyline points=\"22 4 12 14.01 9 11.01\"\/>\n                <\/svg>\n            <\/div>\n            <h4>Calidad<\/h4>\n            <p>Excelencia en cada gota de agua.<\/p>\n        <\/article>\n\n        <article class=\"valor-item epaa-animate-scale epaa-delay-4\" role=\"listitem\">\n            <div class=\"valor-icon\">\n                <!-- SVG: Eficiencia \/ Refresh -->\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <polyline points=\"23 4 23 10 17 10\"\/>\n                    <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"\/>\n                <\/svg>\n            <\/div>\n            <h4>Eficiencia<\/h4>\n            <p>Optimizaci\u00f3n de recursos h\u00eddricos.<\/p>\n        <\/article>\n\n        <article class=\"valor-item epaa-animate-scale epaa-delay-5\" role=\"listitem\">\n            <div class=\"valor-icon\">\n                <!-- SVG: Innovaci\u00f3n \/ Lightbulb -->\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M9 18h6\"\/>\n                    <path d=\"M10 22h4\"\/>\n                    <path d=\"M15.09 14c.18-.9.27-1.4.27-2.15A4.65 4.65 0 0 0 9 7.58C6.45 8.5 5.5 10.5 5.5 12.5a5.5 5.5 0 0 0 2.5 4.5\"\/>\n                    <path d=\"M18.5 12.5a5.5 5.5 0 0 0-2.5-4.5 4.65 4.65 0 0 0-6.36 4.27c0 .75.09 1.25.27 2.15\"\/>\n                <\/svg>\n            <\/div>\n            <h4>Innovaci\u00f3n<\/h4>\n            <p>Tecnolog\u00eda al servicio del ciudadano.<\/p>\n        <\/article>\n\n        <article class=\"valor-item epaa-animate-scale epaa-delay-6\" role=\"listitem\">\n            <div class=\"valor-icon\">\n                <!-- SVG: Compromiso \/ Handshake -->\n                <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M11 11h4l3.5-3.5a2.5 2.5 0 0 1 3.5 3.5l-4 4a2.5 2.5 0 0 1-3.5 0l-3-3\"\/>\n                    <path d=\"M13 13h-4l-3.5 3.5a2.5 2.5 0 0 1-3.5-3.5l4-4a2.5 2.5 0 0 1 3.5 0l3 3\"\/>\n                    <path d=\"M8 8l-3 3\"\/>\n                    <path d=\"M16 16l3-3\"\/>\n                <\/svg>\n            <\/div>\n            <h4>Compromiso<\/h4>\n            <p>Atenci\u00f3n inmediata y continua.<\/p>\n        <\/article>\n\n    <\/div>\n\n    <!-- FOOTER -->\n    <footer class=\"epaa-update-info\" role=\"contentinfo\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#a0aec0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" style=\"vertical-align: middle; margin-right: 4px;\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n        <\/svg>\n        Informaci\u00f3n oficial actualizada al periodo 2026. Empresa P\u00fablica de Agua Potable y Alcantarillado de Antonio Ante.\n    <\/footer>\n<\/div>\n\n<script>\n    \/\/ Intersection Observer para animaciones al scroll\n    document.addEventListener('DOMContentLoaded', function() {\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.classList.add('epaa-visible');\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.1 });\n\n        document.querySelectorAll('.epaa-animate, .epaa-animate-scale').forEach(el => observer.observe(el));\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Nuestra Identidad Comprometidos con el bienestar de Antonio Ante MISI\u00d3N Dotar de los servicios de agua potable y alcantarillado con calidad, eficiencia e innovaci\u00f3n y de atenci\u00f3n inmediata con mejoras cont\u00ednuas, beneficiando a todos los hogares del cant\u00f3n Antonio Ante. VISI\u00d3N Ser una empresa referente a nivel provincial en la optimizaci\u00f3n del modelo de gesti\u00f3n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=57"}],"version-history":[{"count":13,"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":4795,"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=\/wp\/v2\/pages\/57\/revisions\/4795"}],"wp:attachment":[{"href":"https:\/\/epaa.gob.ec\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}