PageSourceSearch

https://sanjosedemaipo.cl/municipalidad/concejo/

html sanjosedemaipo.cl collected 2026-10-02 13:56:45 UTC 125,405 bytes, 2,396 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="es">
4<head>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <meta name="author" content="Ilustre Municipalidad de San José de Maipo" />
8        <title>Concejo - Ilustre Municipalidad de San José de Maipo</title>
9        <meta name="description" content="" />
10
11        <link rel="icon" type="image/png" href="https://cdn.sanjosedemaipo.cl/web2025/favicon/favicon-96x96.png" sizes="96x96" />
12        <link rel="icon" type="image/svg+xml" href="https://cdn.sanjosedemaipo.cl/web2025/favicon/favicon.svg" />
13        <link rel="shortcut icon" href="https://cdn.sanjosedemaipo.cl/web2025/favicon/favicon.ico" />
14        <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.sanjosedemaipo.cl/web2025/favicon/apple-touch-icon.png" />
15        <meta name="apple-mobile-web-app-title" content="San José de Maipo" />
16        <link rel="manifest" href="https://cdn.sanjosedemaipo.cl/web2025/favicon/site.webmanifest" />
17
18        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&family=Inter:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
19        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap" rel="stylesheet">
20        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/tailwind.css?v=7.7" />
21        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/styles.css?v=7.7" />
22        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/buttons.css?v=7.7" />
23        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/header.css?v=7.8" />
24        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/sections.css?v=7.7" />
25        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/banners.css?v=7.8" />
26        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/breadcrumb.css?v=7.7" />
27        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/post.css?v=7.7" />
28        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/spotlight.css?v=7.7" />
29        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/weeklypost.css?v=7.7" />
30        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/author.css?v=7.7" />
31        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/responsive_zari.css?v=7.8" />
32        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/custom.css?v=7.7" />
33        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/header-scroll.css?v=1.0" />
34        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/weathericons.css?v=1.0" />
35
36
37        <link rel="stylesheet" href="https://microfrontends.sanjosedemaipo.cl/licencias/style.css">
38        <link rel="stylesheet" href="https://microfrontends.sanjosedemaipo.cl/oirs/style.css">
39        <link rel="stylesheet" href="https://microfrontends.sanjosedemaipo.cl/registro-vecinos/style.css">
40        <link rel="stylesheet" href="https://microfrontends.sanjosedemaipo.cl/consulta-aseo/style.css">
41        <link rel="stylesheet" href="https://microfrontends.sanjosedemaipo.cl/youtube-live-widget/youtube-live.css">
42        <link rel="stylesheet" href="https://microfrontends.sanjosedemaipo.cl/denuncias-anonimas/style.css">
43
44        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>
45        <link rel="stylesheet" type="text/css" href="https://cdn.sanjosedemaipo.cl/web2025/css/vendors/glightbox.min.css?v=1.0" />
46
47        
48        
49
50        
51        
52    </head>
53
54<body>
55
56  <div
57      data-oirs-microfrontend
58      data-display-mode="button-floating"
59      data-button-text="Centro de atención al vecino"
60      data-button-color="#F4796C"
61      data-button-text-color="#fff"
62      data-button-position="right"
63      data-button-vertical-position="bottom"
64      data-default-form-type="general"
65      data-api-url="https://oirs-api.sanjosedemaipo.cl">
66  </div>
67
68    
69
70
71
72
73
74<style>
75/* Posicionamiento del submenu */
76.submenu {
77    margin-top: 0 !important;
78}
79</style>
80
81<script>
82// Calcular la posición del nav para el submenu
83document.addEventListener('DOMContentLoaded', function() {
84    const nav = document.querySelector('nav.bg-\\[\\#114376\\]');
85    if (nav) {
86        function updateNavOffset() {
87            const navRect = nav.getBoundingClientRect();
88            document.documentElement.style.setProperty('--nav-offset', navRect.bottom + 'px');
89        }
90        updateNavOffset();
91        window.addEventListener('scroll', updateNavOffset);
92        window.addEventListener('resize', updateNavOffset);
93    }
94});
95</script>
95
96
97<header>
98<div id="header-fixed-height"></div>
99<!-- Barra Secundaria -->
100<div class="header-top-wrap">
101  <div class="container mx-auto px-4">
102    <div class="flex flex-wrap items-center justify-between">
103      <div class="flex-1">
104        <div class="header-top-menu">
105          <ul class="list-wrap">
106            <li>
107              <a href="#" class="flex items-center gap-2">
108                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M93-222v-104q0-21 13.5-36.5T140-380h111q15 0 28.5 7t22.5 21q31 44 77.5 68T480-260q54 0 101-24t78-68q9-14 22.5-21t27.5-7h111q20 2 34 17.5t14 36.5v104q0 13-8.5 21.5T838-192H670q-13 0-21.5-8.5T640-222v-69q-33 28-74 43.5T480-232q-44 0-84.5-15T321-290v68q0 13-8.5 21.5T291-192H123q-13 0-21.5-8.5T93-222Zm387-118q-33 0-62.5-15.5T368-398q-13-18-30-31.5T301-451q31-22 82.5-32.5T480-494q45 0 96.5 10.5T660-451q-20 8-37 21.5T593-398q-19 28-49 43t-64 15ZM190-460q-38 0-66-28t-28-66q0-39 28-66.5t66-27.5q39 0 66.5 27.5T284-554q0 38-27.5 66T190-460Zm580 0q-38 0-66-28t-28-66q0-39 28-66.5t66-27.5q39 0 66.5 27.5T864-554q0 38-27.5 66T770-460ZM480-580q-38 0-66-28t-28-66q0-39 28-66.5t66-27.5q39 0 66.5 27.5T574-674q0 38-27.5 66T480-580Z"/></svg>
109                <div class="hidden md:flex flex-col leading-[1]">
110                  <span class="text-[0.8rem] font-semibold">Elecciones</span>
111                  <span class="text-[0.65rem] font-light">Organizaciones comunitarias</span>
112                </div>
113              </a>
114            </li>
115            <li>
116              <a href="http://www.portaltransparencia.cl/PortalPdT/web/guest/directorio-de-organismos-regulados?p_p_id=pdtorganismos_WAR_pdtorganismosportlet&orgcode=b3cbb68bd70bc6833b42ea3654020ef7" class="flex items-center gap-2 transition-colors">
117                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M480.04-306q5.96 0 9.96-4.02 4-4.03 4-9.98v-186q0-5.95-4.04-9.97-4.03-4.03-10-4.03-5.96 0-9.96 4.03-4 4.02-4 9.97v186q0 5.95 4.04 9.98 4.03 4.02 10 4.02ZM480-570q8.5 0 14.25-5.75T500-590q0-8.5-5.75-14.25T480-610q-8.5 0-14.25 5.75T460-590q0 8.5 5.75 14.25T480-570Zm.17 438q-72.17 0-135.73-27.39-63.56-27.39-110.57-74.35-47.02-46.96-74.44-110.43Q132-407.65 132-479.83q0-72.17 27.39-135.73 27.39-63.56 74.35-110.57 46.96-47.02 110.43-74.44Q407.65-828 479.83-828q72.17 0 135.73 27.39 63.56 27.39 110.57 74.35 47.02 46.96 74.44 110.43Q828-552.35 828-480.17q0 72.17-27.39 135.73-27.39 63.56-74.35 110.57-46.96 47.02-110.43 74.44Q552.35-132 480.17-132Zm-.17-28q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
118                <div class="hidden md:flex flex-col leading-[1]">
119                  <span class="text-[0.8rem] font-semibold">Información</span>
120                  <span class="text-[0.65rem] font-light">Ley de Transparencia</span>
121                </div>
122              </a>
123            </li>
124            <li>
125              <a href="http://www.portaltransparencia.cl/PortalPdT/pdtta?codOrganismo=MU292" class="flex items-center gap-2">
126                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M360-266h240q6 0 10-4t4-10q0-6-4-10t-10-4H360q-6 0-10 4t-4 10q0 6 4 10t10 4Zm0-160h240q6 0 10-4t4-10q0-6-4-10t-10-4H360q-6 0-10 4t-4 10q0 6 4 10t10 4Zm-88 294q-26 0-43-17t-17-43v-576q0-26 17-43t43-17h289q12 0 23.5 5t19.5 13l126 126q8 8 13 19.5t5 23.5v449q0 26-17 43t-43 17H272Zm300-550v-118H272q-12 0-22 10t-10 22v576q0 12 10 22t22 10h416q12 0 22-10t10-22v-460H602q-13 0-21.5-8.5T572-682ZM240-800v148-148 640-640Z"/></svg>
127                <div class="hidden md:flex flex-col leading-[1]">
128                  <span class="text-[0.8rem] font-semibold">Transparencia</span>
129                  <span class="text-[0.65rem] font-light">Activa</span>
130                </div>
131              </a>
132            </li>
133            <li>
134              <a href="https://www.leylobby.gob.cl/instituciones/MU292" class="flex items-center gap-2">
135                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M232-132q-26 0-43-17t-17-43v-496q0-26 17-43t43-17h80v-76q0-7 4.5-11.5T328-840q7 0 11.5 4.5T344-824v76h276v-78q0-6 4-10t10-4q6 0 10 4t4 10v78h80q26 0 43 17t17 43v496q0 26-17 43t-43 17H232Zm0-28h496q12 0 22-10t10-22v-336H200v336q0 12 10 22t22 10Zm-32-396h560v-132q0-12-10-22t-22-10H232q-12 0-22 10t-10 22v132Zm0 0v-164 164Zm280 164q-11 0-19.5-8.5T452-420q0-11 8.5-19.5T480-448q11 0 19.5 8.5T508-420q0 11-8.5 19.5T480-392Zm-160 0q-11 0-19.5-8.5T292-420q0-11 8.5-19.5T320-448q11 0 19.5 8.5T348-420q0 11-8.5 19.5T320-392Zm320 0q-11 0-19.5-8.5T612-420q0-11 8.5-19.5T640-448q11 0 19.5 8.5T668-420q0 11-8.5 19.5T640-392ZM480-240q-11 0-19.5-8.5T452-268q0-11 8.5-19.5T480-296q11 0 19.5 8.5T508-268q0 11-8.5 19.5T480-240Zm-160 0q-11 0-19.5-8.5T292-268q0-11 8.5-19.5T320-296q11 0 19.5 8.5T348-268q0 11-8.5 19.5T320-240Zm320 0q-11 0-19.5-8.5T612-268q0-11 8.5-19.5T640-296q11 0 19.5 8.5T668-268q0 11-8.5 19.5T640-240Z"/></svg>
136                <div class="hidden md:flex flex-col leading-[1]">
137                  <span class="text-[0.8rem] font-semibold">Lobby</span>
138                  <span class="text-[0.65rem] font-light">Plataforma</span>
139                </div>
140              </a>
141            </li>
142            <li>
143              <a href="#" class="flex items-center gap-2">
144                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M232-132q-26 0-43-17t-17-43v-496q0-26 17-43t43-17h80v-76q0-7 4.5-11.5T328-840q7 0 11.5 4.5T344-824v76h276v-78q0-6 4-10t10-4q6 0 10 4t4 10v78h80q26 0 43 17t17 43v496q0 26-17 43t-43 17H232Zm0-28h496q12 0 22-10t10-22v-336H200v336q0 12 10 22t22 10Zm-32-396h560v-132q0-12-10-22t-22-10H232q-12 0-22 10t-10 22v132Zm0 0v-164 164Zm280 164q-11 0-19.5-8.5T452-420q0-11 8.5-19.5T480-448q11 0 19.5 8.5T508-420q0 11-8.5 19.5T480-392Zm-160 0q-11 0-19.5-8.5T292-420q0-11 8.5-19.5T320-448q11 0 19.5 8.5T348-420q0 11-8.5 19.5T320-392Zm320 0q-11 0-19.5-8.5T612-420q0-11 8.5-19.5T640-448q11 0 19.5 8.5T668-420q0 11-8.5 19.5T640-392ZM480-240q-11 0-19.5-8.5T452-268q0-11 8.5-19.5T480-296q11 0 19.5 8.5T508-268q0 11-8.5 19.5T480-240Zm-160 0q-11 0-19.5-8.5T292-268q0-11 8.5-19.5T320-296q11 0 19.5 8.5T348-268q0 11-8.5 19.5T320-240Zm320 0q-11 0-19.5-8.5T612-268q0-11 8.5-19.5T640-296q11 0 19.5 8.5T668-268q0 11-8.5 19.5T640-240Z"/></svg>
145                <div class="hidden md:flex flex-col leading-[1]">
146                  <span class="text-[0.8rem] font-semibold">Histórico</span>
147                  <span class="text-[0.65rem] font-light">Lobby antiguo</span>
148                </div>
149              </a>
150            </li>
151            <li>
152              <a href="#" class="flex items-center gap-2">
153                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="m438-339-76-76q-2-2-4.5-3t-5-1q-2.5 0-5.5 1t-5 3q-5 5-5 10t5 10l75 75q5 5 10 7t11 2q6 0 11-2t10-7l159-159q4-4 4.5-9.5T618-499q-5-5-10-5t-10 5L438-339ZM272-132q-26 0-43-17t-17-43v-576q0-26 17-43t43-17h289q12 0 23.5 5t19.5 13l126 126q8 8 13 19.5t5 23.5v449q0 26-17 43t-43 17H272Zm300-550v-118H272q-12 0-22 10t-10 22v576q0 12 10 22t22 10h416q12 0 22-10t10-22v-460H602q-13 0-21.5-8.5T572-682ZM240-800v148-148 640-640Z"/></svg>
154                <div class="hidden md:flex flex-col leading-[1]">
155                  <span class="text-[0.8rem] font-semibold">Licitaciones</span>
156                  <span class="text-[0.65rem] font-light">Públicas</span>
157                </div>
158              </a>
159            </li>
160          </ul>
161        </div>
162      </div>
163      <!-- YouTube Live Widget Container (Microfrontend) -->
164      
165      <div id="youtube-live-widget"
166           class="flex-shrink-0"
167           data-channel-id="UCQ8dwKkrKarS2_UGrblXQpw"
168           data-api-url="https://api-microfronts.sanjosedemaipo.cl/youtube-live"
169           data-check-interval="300000"
170           data-auto-check="true"></div>
171      
172    </div>
173  </div>
174</div>
175
176
177<!-- Barra principal -->
178<div id="sticky-header" class="menu-area menu-style-three bg-[#114376]">
179  <div class="container mx-auto px-4">
180    <div class="flex flex-wrap">
181      <div class="w-full">
182        <div class="menu-wrap">
183          <nav class="menu-nav flex items-center justify-between w-full">
184            <div class="logo flex-shrink-0">
185                <a href="/">
186                    
187                        <img alt="Logo Municipalidad San José de Maipo" class="w-[140px] h-auto" height="2067" src="https://cdn.sanjosedemaipo.cl/images/Logo_Municipalidad_San_Jose_de_Mai.original.format-avif.avif" width="5488">
188                    
189
190                </a>
191            </div>
192
193            <!-- Menú de navegación principal - Solo visible en desktop -->
194            <div class="navbar-wrap main-menu hidden lg:flex flex-grow justify-center">
195                
196
197<ul class="navigation">
198    
199        
200            <li class=" ">
201                <a href="/" class="">Home</a>
202                
203            </li>
204        
205    
206        
207            <li class="ancestor menu-item-has-children">
208                <a href="/municipalidad/" class="">Municipalidad</a>
209                
210                    
211<ul class="sub-menu">
212    
213    <li><a href="/municipalidad/alcalde/"  class="">Alcalde</a></li>
214    
215    <li><a href="/municipalidad/concejo/"  class="">Concejo</a></li>
216    
217    <li><a href="/municipalidad/cosoc/"  class="">COSOC</a></li>
218    
219    <li><a href="/municipalidad/cuenta-publica/"  class="">Cuenta Pública</a></li>
220    
221    <li><a href="/municipalidad/directorio-telefonico/"  class="">Directorio telefónico</a></li>
222    
223    <li><a href="/municipalidad/mision-y-vision/"  class="">Misión y Visión</a></li>
224    
225    <li><a href="/municipalidad/ordenanazas/"  class="">Ordenanzas</a></li>
226    
227    <li><a href="/municipalidad/organigrama/"  class="">Organigrama</a></li>
228    
229    <li><a href="/municipalidad/presupuesto-municipal/"  class="">Presupuesto Municipal</a></li>
230    
231    <li><a href="/municipalidad/unidades-municipales/"  class="">Unidades Municipales</a></li>
232    
233</ul>
234
235
236
237
238                
239            </li>
240        
241    
242        
243            <li class=" ">
244                <a href="/eventos/" class="">Eventos</a>
245                
246            </li>
247        
248    
249        
250            <li class=" menu-item-has-children">
251                <a href="/direcciones/" class="">Direcciones</a>
252                
253                    
254<ul class="sub-menu">
255    
256    <li><a href="/direcciones/direccion-administracion-municipal/"  class="">Dirección Administración Municipal</a></li>
257    
258    <li><a href="/direcciones/direccion-de-administracion-y-finanzas/"  class="">Dirección de Administración, Finanzas y Personal</a></li>
259    
260    <li><a href="/direcciones/direccion-de-asesoria-juridica/"  class="">Dirección de Asesoría Jurídica</a></li>
261    
262    <li><a href="/direcciones/direccion-de-asistencia-social-dasi/"  class="">Dirección de Asistencia Social (DASI)</a></li>
263    
264    <li><a href="/direcciones/direccion-de-control-interno/"  class="">Dirección de Control Interno</a></li>
265    
266    <li><a href="/direcciones/direccion-de-desarrollo-comunitario/"  class="">Dirección de Desarrollo Comunitario</a></li>
267    
268    <li><a href="/direcciones/direccion-de-obras-municipales/"  class="">Dirección de Obras Municipales</a></li>
269    
270    <li><a href="/direcciones/direccion-de-proteccion-civil-emergencia-y-operaciones/"  class="">Dirección de Protección Civil, Emergencia y Operaciones</a></li>
271    
272    <li><a href="/direcciones/direccion-de-seguridad-y-ordenamiento-territorial/"  class="">Dirección de Seguridad y Ordenamiento Territorial</a></li>
273    
274    <li><a href="/direcciones/direccion-de-transito-y-transporte-publico/"  class="">Dirección de Tránsito y Transporte Público</a></li>
275    
276</ul>
277
278
279
280
281                
282            </li>
283        
284    
285        
286            <li class=" menu-item-has-children">
287                <a href="/comuna/" class="">Comuna</a>
288                
289                    
290<ul class="sub-menu">
291    
292    <li><a href="/comuna/areas-naturales-protegidas/"  class="">Áreas Naturales Protegidas</a></li>
293    
294    <li><a href="/comuna/avisos-de-utilidad-publica/"  class="">Avisos de Utilidad Pública</a></li>
295    
296    <li><a href="/comuna/datos-comunales/"  class="">Datos Comunales</a></li>
297    
298    <li><a href="/comuna/areas-de-riesgo/"  class="">Gestión de Riesgo de Desastres</a></li>
299    
300    <li><a href="/comuna/historia/"  class="">Historia</a></li>
301    
302    <li><a href="/comuna/localidades/"  class="">Localidades</a></li>
303    
304    <li><a href="/comuna/pladeco/"  class="">PLADECO</a></li>
305    
306    <li><a href="/comuna/pladetur/"  class="">PLADETUR</a></li>
307    
308    <li><a href="/comuna/ubicacion-y-limites/"  class="">Ubicación y límites</a></li>
309    
310</ul>
311
312
313
314
315                
316            </li>
317        
318    
319        
320            <li class=" menu-item-has-children">
321                <a href="/servicios/" class="">Servicios</a>
322                
323                    
324<ul class="sub-menu">
325    
326    <li><a href="/servicios/actividad-fisica-y-deporte/"  class="">Actividad Física y Deporte</a></li>
327    
328    <li><a href="/servicios/cultura/"  class="">Cultura</a></li>
329    
330    <li><a href="/servicios/programa-chile-crece-contigo/"  class="">Oficina Local de la Niñez</a></li>
331    
332    <li><a href="/servicios/oficina-municipal-de-intermediacion-laboral-omil/"  class="">Oficina Municipal de Intermediación Laboral (OMIL)</a></li>
333    
334    <li><a href="/servicios/omdel/"  class="">OMDEL</a></li>
335    
336    <li><a href="/servicios/prodesal-programa-de-desarrollo-local/"  class="">PRODESAL - Programa de desarrollo Local</a></li>
337    
338    <li><a href="/servicios/programa-mujeres-jefas-de-hogar/"  class="">Programa Mujeres Jefas de Hogar</a></li>
339    
340    <li><a href="/servicios/programa-senda-previene/"  class="">Programa SENDA Previene</a></li>
341    
342    <li><a href="/servicios/programas-de-asistencia-social/"  class="">Programas de Asistencia Social</a></li>
343    
344    <li><a href="/servicios/registro-social-de-hogares-ex-ficha-de-proteccion-social/"  class="">Registro Social de Hogares (ex Ficha de Protección Social)</a></li>
345    
346    <li><a href="/servicios/salud/"  class="">Salud</a></li>
347    
348</ul>
349
350
351
352
353                
354            </li>
355        
356    
357        
358            <li class=" menu-item-has-children">
359                <a href="/tramites/" class="">Trámites</a>
360                
361                    
362<ul class="sub-menu">
363    
364    <li><a href="/tramites/certificados-de-direccion-de-obras/"  class="">Certificados de dirección de obras</a></li>
365    
366    <li><a href="/tramites/juzgado-de-policia-local/"  class="">Juzgado de policía local</a></li>
367    
368    <li><a href="/tramites/licencia-de-conducir/"  class="">Licencia de conducir</a></li>
369    
370    <li><a href="/tramites/otorgamiento-de-patente-de-alcohol/"  class="">
370Otorgamiento de Patente de Alcohol</a></li>
371    
372    <li><a href="/tramites/patentes-comerciales/"  class="">Patentes comerciales</a></li>
373    
374    <li><a href="/tramites/permiso-de-circulacion/"  class="">Permiso de circulación</a></li>
375    
376    <li><a href="/tramites/primera-patente-municipal/"  class="">Primera patente municipal</a></li>
377    
378    <li><a href="/tramites/primera-patente-municipal-profesional/"  class="">Primera patente municipal profesional</a></li>
379    
380    <li><a href="/tramites/solicitud-primera-licencia/"  class="">Solicitud primera licencia</a></li>
381    
382    <li><a href="/tramites/validacion-permiso-online/"  class="">Validación Permiso Circulación Online</a></li>
383    
384</ul>
385
386
387
388
389                
390            </li>
391        
392    
393</ul>
394
395            </div>
396
397            <!-- Acciones del header -->
398            <div class="header-action flex items-center gap-4 flex-shrink-0">
399              <!-- Teléfono y Emergencias - solo desktop -->
400              <div class="hidden lg:flex items-center gap-3">
401                  <!-- Emergencias  -->
402                  <a href="tel:+56226784923" class="emergency-call" aria-label="Llamar a Emergencias +56 2 2678 4923">
403                    <svg xmlns="http://www.w3.org/2000/svg" class="emergency-call__icon" height="30px" viewBox="0 -960 960 960" width="30px" fill="currentColor"><path d="m726-572.67-46-48L753.33-694H524v-66.67h229.33l-72-72L728.67-880l152.66 153.33-155.33 154ZM796-120q-119 0-240-55.5T333-333Q231-435 175.5-556T120-796q0-18.86 12.57-31.43T164-840h147.33q14 0 24.34 9.83Q346-820.33 349.33-806l26.62 130.43q2.05 14.9-.62 26.24-2.66 11.33-10.82 19.48L265.67-530q24 41.67 52.5 78.5T381-381.33q35 35.66 73.67 65.5Q493.33-286 536-262.67l94.67-96.66q9.66-10.34 23.26-14.5 13.61-4.17 26.74-2.17L806-349.33q14.67 4 24.33 15.53Q840-322.27 840-308v144q0 18.86-12.57 31.43T796-120ZM233-592l76-76.67-21-104.66H187q3 41.66 13.67 86Q211.33-643 233-592Zm365.33 361.33q40.34 18.34 85.84 29.67 45.5 11.33 89.16 13.67V-288l-100-20.33-75 77.66ZM233-592Zm365.33 361.33Z"/></svg>
404                    <span class="emergency-call__text">
405                      <span class="emergency-call__number">+56 2 2678 4923</span><br>
406                      <span class="emergency-call__label">Emergencias</span>
407                    </span>
408                  </a>
409
410                  <!-- Botón de búsqueda -->
411                  <button onclick="openSearchModal()" id="searchButton" class="p-2 rounded-full hover:bg-white/10 transition-colors" aria-label="Buscar en el sitio">
412                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
413                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
414                      </svg>
415                  </button>
416              </div>
417
418              <!-- Botón menú móvil - solo visible en mobile/tablet -->
419              <button id="mobileMenuButton" class="lg:hidden p-1 rounded-full hover:bg-white/10 transition-colors" aria-label="Abrir menú de navegación">
420                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
421                      <line x1="3" y1="12" x2="21" y2="12" />
422                      <line x1="3" y1="6" x2="21" y2="6" />
423                      <line x1="3" y1="18" x2="21" y2="18" />
424                  </svg>
425              </button>
426            </div>
427          </nav>
428
429          <!-- Menú móvil (oculto por defecto) - Fuera del nav para mejor posicionamiento -->
430          <div id="mobileMenu" class="hidden lg:hidden bg-[#114376] absolute top-full left-0 right-0 shadow-lg z-50 border-t border-white/10">
431              <div class="px-4 py-6 flex flex-col space-y-4">
432                  <!-- Menú principal con submenús -->
433                  
434
435<div class="mobile-menu">
436  
437    <div class="menu-item relative">
438      
439        <a href="/" class="menu-link py-2 px-4 w-full block text-left hover:text-white transition-colors duration-200  text-white">
440          Home
441        </a>
442      
443    </div>
444  
445    <div class="menu-item relative">
446      
447        <button class="menu-link py-2 px-4 w-full text-left flex justify-between items-center hover:text-white transition-colors duration-200 ancestor text-white" data-toggle-submenu>
448          Municipalidad
449          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
450            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
451          </svg>
452        </button>
453        
454
455<div class="mobile-sub-menu hidden mt-2 rounded-lg">
456  
457    <a href="/municipalidad/alcalde/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Alcalde</a>
458  
459    <a href="/municipalidad/concejo/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Concejo</a>
460  
461    <a href="/municipalidad/cosoc/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">COSOC</a>
462  
463    <a href="/municipalidad/cuenta-publica/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Cuenta Pública</a>
464  
465    <a href="/municipalidad/directorio-telefonico/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Directorio telefónico</a>
466  
467    <a href="/municipalidad/mision-y-vision/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Misión y Visión</a>
468  
469    <a href="/municipalidad/ordenanazas/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Ordenanzas</a>
470  
471    <a href="/municipalidad/organigrama/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Organigrama</a>
472  
473    <a href="/municipalidad/presupuesto-municipal/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Presupuesto Municipal</a>
474  
475    <a href="/municipalidad/unidades-municipales/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Unidades Municipales</a>
476  
477</div>
478
479      
480    </div>
481  
482    <div class="menu-item relative">
483      
484        <a href="/eventos/" class="menu-link py-2 px-4 w-full block text-left hover:text-white transition-colors duration-200  text-white">
485          Eventos
486        </a>
487      
488    </div>
489  
490    <div class="menu-item relative">
491      
492        <button class="menu-link py-2 px-4 w-full text-left flex justify-between items-center hover:text-white transition-colors duration-200  text-white" data-toggle-submenu>
493          Direcciones
494          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
495            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
496          </svg>
497        </button>
498        
499
500<div class="mobile-sub-menu hidden mt-2 rounded-lg">
501  
502    <a href="/direcciones/direccion-administracion-municipal/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección Administración Municipal</a>
503  
504    <a href="/direcciones/direccion-de-administracion-y-finanzas/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Administración, Finanzas y Personal</a>
505  
506    <a href="/direcciones/direccion-de-asesoria-juridica/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Asesoría Jurídica</a>
507  
508    <a href="/direcciones/direccion-de-asistencia-social-dasi/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Asistencia Social (DASI)</a>
509  
510    <a href="/direcciones/direccion-de-control-interno/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Control Interno</a>
511  
512    <a href="/direcciones/direccion-de-desarrollo-comunitario/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Desarrollo Comunitario</a>
513  
514    <a href="/direcciones/direccion-de-obras-municipales/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Obras Municipales</a>
515  
516    <a href="/direcciones/direccion-de-proteccion-civil-emergencia-y-operaciones/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Protección Civil, Emergencia y Operaciones</a>
517  
518    <a href="/direcciones/direccion-de-seguridad-y-ordenamiento-territorial/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Seguridad y Ordenamiento Territorial</a>
519  
520    <a href="/direcciones/direccion-de-transito-y-transporte-publico/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Dirección de Tránsito y Transporte Público</a>
521  
522</div>
523
524      
525    </div>
526  
527    <div class="menu-item relative">
528      
529        <button class="menu-link py-2 px-4 w-full text-left flex justify-between items-center hover:text-white transition-colors duration-200  text-white" data-toggle-submenu>
530          Comuna
531          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
532            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
533          </svg>
534        </button>
535        
536
537<div class="mobile-sub-menu hidden mt-2 rounded-lg">
538  
539    <a href="/comuna/areas-naturales-protegidas/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Áreas Naturales Protegidas</a>
540  
541    <a href="/comuna/avisos-de-utilidad-publica/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Avisos de Utilidad Pública</a>
542  
543    <a href="/comuna/datos-comunales/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Datos Comunales</a>
544  
545    <a href="/comuna/areas-de-riesgo/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Gestión de Riesgo de Desastres</a>
546  
547    <a href="/comuna/historia/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Historia</a>
548  
549    <a href="/comuna/localidades/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Localidades</a>
550  
551    <a href="/comuna/pladeco/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">PLADECO</a>
552  
553    <a href="/comuna/pladetur/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">PLADETUR</a>
554  
555    <a href="/comuna/ubicacion-y-limites/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Ubicación y límites</a>
556  
557</div>
558
559      
560    </div>
561  
562    <div class="menu-item relative">
563      
564        <button class="menu-link py-2 px-4 w-full text-left flex justify-between items-center hover:text-white transition-colors duration-200  text-white" data-toggle-submenu>
565          Servicios
566          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
567            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
568          </svg>
569        </button>
570        
571
572<div class="mobile-sub-menu hidden mt-2 rounded-lg">
573  
574    <a href="/servicios/actividad-fisica-y-deporte/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Actividad Física y Deporte</a>
575  
576    <a href="/servicios/cultura/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Cultura</a>
577  
578    <a href="/servicios/programa-chile-crece-contigo/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Oficina Local de la Niñez</a>
579  
580    <a href="/servicios/oficina-municipal-de-intermediacion-laboral-omil/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Oficina Municipal de Intermediación Laboral (OMIL)</a>
581  
582    <a href="/servicios/omdel/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">OMDEL</a>
583  
584    <a href="/servicios/prodesal-programa-de-desarrollo-local/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">PRODESAL - Programa de desarrollo Local</a>
585  
586    <a href="/servicios/programa-mujeres-jefas-de-hogar/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Programa Mujeres Jefas de Hogar</a>
587  
588    <a href="/servicios/programa-senda-previene/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Programa SENDA Previene</a>
589  
590    <a href="/servicios/programas-de-asistencia-social/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Programas de Asistencia Social</a>
591  
592    <a href="/servicios/registro-social-de-hogares-ex-ficha-de-proteccion-social/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Registro Social de Hogares (ex Ficha de Protección Social)</a>
593  
594    <a href="/servicios/salud/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Salud</a>
595  
596</div>
597
598      
599    </div>
600  
601    <div class="menu-item relative">
602      
603        <button class="menu-link py-2 px-4 w-full text-left flex justify-between items-center hover:text-white transition-colors duration-200  text-white" data-toggle-submenu>
604          Trámites
605          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
606            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
607          </svg>
608        </button>
609        
610
611<div class="mobile-sub-menu hidden mt-2 rounded-lg">
612  
613    <a href="/tramites/certificados-de-direccion-de-obras/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Certificados de dirección de obras</a>
614  
615    <a href="/tramites/juzgado-de-policia-local/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Juzgado de policía local</a>
616  
617    <a href="/tramites/licencia-de-conducir/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Licencia de conducir</a>
618  
619    <a href="/tramites/otorgamiento-de-patente-de-alcohol/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">
619Otorgamiento de Patente de Alcohol</a>
620  
621    <a href="/tramites/patentes-comerciales/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Patentes comerciales</a>
622  
623    <a href="/tramites/permiso-de-circulacion/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Permiso de circulación</a>
624  
625    <a href="/tramites/primera-patente-municipal/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Primera patente municipal</a>
626  
627    <a href="/tramites/primera-patente-municipal-profesional/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Primera patente municipal profesional</a>
628  
629    <a href="/tramites/solicitud-primera-licencia/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Solicitud primera licencia</a>
630  
631    <a href="/tramites/validacion-permiso-online/" class="menu-link block py-2 px-4 text-sm text-white/90 hover:text-white hover:bg-white/10 transition-colors rounded-md">Validación Permiso Circulación Online</a>
632  
633</div>
634
635      
636    </div>
637  
638</div>
639
640                  <!-- Búsqueda y Botones de contacto -->
641                  <div class="flex flex-col gap-2 pt-4 border-t border-white/10">
642                      <!-- Botón de búsqueda móvil -->
643                      <button onclick="openSearchModal()" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors p-3 rounded-lg bg-white/5 hover:bg-white/10">
644                          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
645                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
646                          </svg>
647                          <span>Buscar en el sitio</span>
648                      </button>
649
650                      <a href="tel:226784900" class="contact-btn phone-btn action-btn flex items-center gap-2 text-white hover:text-gray-200 transition-colors p-3 rounded-lg bg-white/5 hover:bg-white/10">
651                          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M757.23-160q-101.15 0-207.38-50.65-106.23-50.66-197.77-142.2-90.77-91.53-141.43-197.38Q160-656.08 160-757.23q0-18 12-30.39Q184-800 202-800h98.92q16.31 0 28.46 10.27 12.16 10.27 16.47 26.35L365.69-668q2.77 16.77-1 29.31t-13.31 20.54l-87.76 81.84q24.61 44.69 54.42 83.04 29.81 38.35 63.58 72.65 34.84 34.85 75 64.81 40.15 29.96 88.15 56.58l85.54-87.08q9.77-10.54 21.96-13.88 12.19-3.35 26.96-1.35l84.15 17.23q16.31 4 26.47 16.43Q800-315.46 800-299.38V-202q0 18-12.38 30-12.39 12-30.39 12Z"/></svg>
652                          <span>Mesa Central: 22 678 4900</span>
653                      </a>
654
655                      <a href="tel:226784923" class="contact-btn emergency-btn action-btn flex items-center gap-2 text-white hover:text-gray-200 transition-colors p-3 rounded-lg bg-red-500/20 hover:bg-red-500/30">
656                          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" width="24px" fill="none" class="w-5 h-5 fill-current"><path d="M243.85-180q-12.75 0-21.38-8.63-8.62-8.63-8.62-21.38 0-12.76 8.62-21.37 8.63-8.62 21.38-8.62h31.3l77.08-258.38q6.85-23.7 26.31-37.66Q398-550 421.54-550h116.92q23.54 0 43 13.96t26.31 37.66L684.85-240h31.3q12.75 0 21.38 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.37-8.63 8.62-21.38 8.62h-472.3Zm94.53-60h283.24L550-481.15q-1.15-4.24-4.42-6.54-3.27-2.31-7.5-2.31H421.92q-4.23 0-7.5 2.31-3.27 2.3-4.42 6.54L338.38-240ZM450-672.31v-120q0-12.75 8.63-21.37 8.63-8.63 21.38-8.63 12.76 0 21.37 8.63 8.62 8.62 8.62 21.37v120q0 12.75-8.63 21.38-8.63 8.62-21.38 8.62-12.76 0-21.37-8.62-8.62-8.63-8.62-21.38Zm206.92 60.93 85.39-85q8.31-8.31 20.57-8.43 12.27-.11 21.26 8.88 8.24 8.24 8.24 20.62 0 12.39-8.3 20.69l-85 86q-8.93 8.93-20.89 9.12-11.96.19-21.27-9.12-9.3-9.3-9.3-21.38 0-12.08 9.3-21.38ZM760-422.31h120q12.75 0 21.37 8.63 8.63 8.63 8.63 21.39 0 12.75-8.63 21.37-8.62 8.61-21.37 8.61H760q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37 8.62-8.62 21.37-8.62ZM260.92-569.23l-85-85.39q-8.3-8.3-8.42-20.57-.11-12.27 8.88-21.26 8.24-8.24 20.62-8.24t20.69 8.31l86 85q8.92 8.92 9.12 20.88.19 11.96-9.12 21.27-9.31 9.31-21.38 9.31-12.08 0-21.39-9.31ZM80-362.31q-12.75 0-21.37-8.63Q50-379.57 50-392.32q0-12.76 8.63-21.37 8.62-8.62 21.37-8.62h120q12.75 0 21.37 8.63 8.63 8.63 8.63 21.39 0 12.75-8.63 21.37-8.62 8.61-21.37 8.61H80ZM480-240Z"/></svg>
657                          <span>Emergencias: 22 678 4923</span>
658                      </a>
659                  </div>
660              </div>
661          </div>
662        </div>
663      </div>
664    </div>
665  </div>
666</div>
667</header>
668
669
670
671<div id="searchModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 backdrop-blur-sm transition-all duration-300 opacity-0">
672  <!-- Overlay clickeable para cerrar -->
673  <div class="absolute inset-0" id="modalOverlay"></div>
674
675  <!-- Container del modal -->
676  <div class="flex items-start justify-center min-h-screen px-4 pt-16 pb-20">
677    <!-- Modal content -->
678    <div class="relative bg-white rounded-xl shadow-2xl max-w-lg w-full transform transition-all duration-300 scale-95 translate-y-4">
679
680      <!-- Header del modal -->
681      <div class="flex items-center justify-between p-6 border-b border-gray-200">
682        <h2 class="text-xl font-semibold text-gray-900 flex items-center">
683          <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
684            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
685          </svg>
686          Buscar contenido
687        </h2>
688
689        <!-- Botón de cerrar -->
690        <button id="closeModal" class="text-gray-400 hover:text-gray-600 transition-colors duration-200 p-1 rounded-lg hover:bg-gray-100" aria-label="Cerrar modal">
691          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
692            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
693          </svg>
694        </button>
695      </div>
696
697      <!-- Cuerpo del modal -->
698      <div class="p-6">
699        <!-- Formulario de búsqueda -->
700        <form method="get" action="/search/" class="search-form">
701          <div class="relative mb-4">
702            <!-- Icono de búsqueda -->
703            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
704              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
705                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
706              </svg>
707            </div>
708
709            <!-- Input de búsqueda -->
710            <input type="text" name="query" id="searchInput" class="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg text-base placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" placeholder="Escribe para buscar..." autocomplete="off" />
711
712            <!-- Indicador de carga -->
713            <div id="searchLoading" class="absolute inset-y-0 right-0 pr-3 flex items-center hidden">
714              <svg class="animate-spin h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24">
715                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
716                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
717              </svg>
718            </div>
719          </div>
720
721          <div class="mb-4">
722            
723            <div class="flex flex-wrap gap-2">
724              <a href="/noticias/" class="search-suggestion px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-full transition-colors duration-200">
725                📰 Noticias
726              </a>
727              <button type="button" class="search-suggestion px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-full transition-colors duration-200">
728                📞 Contacto
729              </button>
730              <button type="button" class="search-suggestion px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm rounded-full transition-colors duration-200">
731                🔧 Servicios
732              </button>
733            </div>
734          </div>
735
736          <div id="liveResults" class="hidden">
737            <div class="border-t border-gray-200 pt-4">
738              <h3 class="text-sm font-medium text-gray-900 mb-3">Resultados:</h3>
739              <div id="resultsContainer" class="space-y-2 max-h-64 overflow-y-auto">
740              </div>
741            </div>
742          </div>
743
744          <div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
745            <button type="button" id="closeModalBtn" class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200 font-medium">
746                Cancelar
747            </button>
748
749            <button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 font-medium transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
750              <span class="flex items-center">
751                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
752                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
753                </svg>
754                Buscar
755              </span>
756            </button>
757          </div>
758        </form>
759      </div>
760
761    </div>
762  </div>
763</div>
764
765
766    
767
768    
769
770    <!-- Sección del Breadcrumb y Título -->
771    <section id="page-title" class="relative bg-gradient-to-br from-gray-50 via-white to-orange-50 border-b border-gray-100">
772        <div class="container mx-auto px-4 sm:px-6 py-8 md:py-12">
773            <!-- Título principal con decoración -->
774            <div class="max-w-4xl">
775                <div class="flex items-center gap-3 mb-4">
776                    <div class="w-1 h-12 bg-gradient-to-b from-orange-500 to-orange-300 rounded-full"></div>
777                    <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
778                        Concejo
779                    </h1>
780                </div>
781
782                <!-- Breadcrumb -->
783                <nav aria-label="Breadcrumb" class="flex items-center gap-2 text-sm mt-6">
784                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
785                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
786                    </svg>
787                    
788                        
789                    
790                        
791                            <a href="/" class="text-gray-600 hover:text-orange-600 transition-colors duration-200 font-medium">
792                                Home
793                            </a>
794                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
795                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
796                            </svg>
797                        
798                    
799                        
800                            <a href="/municipalidad/" class="text-gray-600 hover:text-orange-600 transition-colors duration-200 font-medium">
801                                Municipalidad
802                            </a>
803                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
804                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
805                            </svg>
806                        
807                    
808                    <span class="text-gray-900 font-semibold">Concejo</span>
809                </nav>
810            </div>
811
812            <!-- Elemento decorativo inferior -->
813            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-orange-500 to-transparent opacity-50"></div>
814        </div>
815    </section>
816
817
818    <!-- Sección de Contenido Principal -->
819    <section id="content" class="bg-gradient-to-b from-gray-50 to-white min-h-screen">
820        <div class="content-wrap">
821            <div class="container mx-auto px-4 sm:px-6 py-8 lg:py-12">
822                <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
823                    <div class="lg:col-span-9">
824                        <!-- Main Body Content -->
825                        <div class="content-section p-6 sm:p-8 lg:p-10 bg-white border border-gray-200 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
826                            
827
828                            <!-- StreamField Content Blocks -->
829                            
830
831                                <!-- Heading 2 -->
832                                
833                                <div class="my-8">
834                                    
835    <div class="my-8 md:my-10 fancy-title title-border title-center">
836        <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
837            Concejo Municipal de San José de Maipo
838        </h2>
839        
840    </div>
841
842
843                                </div>
844                                
845                            
846
847                                <!-- Heading 2 -->
848                                
849                                <div class="my-8">
850                                    <p data-block-key="d7jel">Es una entidad de carácter normativo, resolutivo y fiscalizador, encargada de hacer efectiva la participación de la comunidad local y de ejercer las atribuciones que señala la ley.</p>
851                                </div>
852                                
853                            
854
855                                <!-- Heading 2 -->
856                                
857                                <div class="my-8">
858                                    
859
860<!-- Accordion Container -->
861<div class="accordion-container space-y-4">
862    
863    <div class="accordion-item bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
864
865        <!-- Accordion Header -->
866        <button class="accordion-header w-full px-6 py-4 text-left focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-inset transition-all duration-200 hover:bg-gray-50"
867                onclick="toggleAccordion(this)"
868                aria-expanded="false"
869                aria-controls="accordion-content-1">
870            <div class="flex items-center justify-between">
871                <div class="flex items-center space-x-4">
872                    <!-- Icon Container -->
873                    <div class="flex-shrink-0 w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center transition-all duration-300">
874                        <!-- Plus Icon (when closed) -->
875                        <svg class="accordion-icon-plus w-5 h-5 text-orange-600 transition-all duration-300"
876                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
877                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
878                        </svg>
879                        <!-- Minus Icon (when open) -->
880                        <svg class="accordion-icon-minus w-5 h-5 text-orange-600 transition-all duration-300 opacity-0 absolute"
881                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
882                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"></path>
883                        </svg>
884                    </div>
885
886                    <!-- Title -->
887                    <h3 class="text-lg md:text-xl font-semibold text-gray-900 transition-colors duration-200">
888                        Principales atribuciones
889                    </h3>
890                </div>
891
892                <!-- Chevron Arrow -->
893                <div class="flex-shrink-0">
894                    <svg class="accordion-chevron w-5 h-5 text-gray-400 transition-transform duration-300"
895                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
896                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
897                    </svg>
898                </div>
899            </div>
900        </button>
901
902        <!-- Accordion Content -->
903        <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out"
904             id="accordion-content-1">
905            <div class="px-6 pb-6 pt-2">
906                <div class="pl-12"> <!-- Indent to align with title -->
907                    <div class="prose prose-gray max-w-none">
908                        <p data-block-key="v2rok">Elegir al alcalde, en caso de vacancia.</p><ul><li data-block-key="7ecte">Fiscalizar el cumplimiento de los planes y programas de inversión municipal y la ejecución del presupuesto municipal, analizar el registro público mensual de gastos detallados que lleva la Dirección de Administración y Finanzas.</li><li data-block-key="4y848">Fiscalizar las actuaciones del alcalde y formularle las observaciones que le merezcan.</li><li data-block-key="va1bl">Fiscalizar las unidades y servicios municipales.</li><li data-block-key="97082">Recomendar al alcalde prioridades en la formulación y ejecución de proyectos específicos y medidas concretas de desarrollo comunal.</li><li data-block-key="n4bb5">Solicitar informe a las empresas, corporaciones o fundaciones municipales, y a las entidades que reciban aportes o subvenciones de la municipalidad.</li><li data-block-key="54qo0">Supervisar el cumplimiento del plan comunal de desarrollo.</li></ul>
909                    </div>
910                </div>
911            </div>
912        </div>
913    </div>
914    
915    <div class="accordion-item bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
916
917        <!-- Accordion Header -->
918        <button class="accordion-header w-full px-6 py-4 text-left focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-inset transition-all duration-200 hover:bg-gray-50"
919                onclick="toggleAccordion(this)"
920                aria-expanded="false"
921                aria-controls="accordion-content-2">
922            <div class="flex items-center justify-between">
923                <div class="flex items-center space-x-4">
924                    <!-- Icon Container -->
925                    <div class="flex-shrink-0 w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center transition-all duration-300">
926                        <!-- Plus Icon (when closed) -->
927                        <svg class="accordion-icon-plus w-5 h-5 text-orange-600 transition-all duration-300"
928                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
929                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
930                        </svg>
931                        <!-- Minus Icon (when open) -->
932                        <svg class="accordion-icon-minus w-5 h-5 text-orange-600 transition-all duration-300 opacity-0 absolute"
933                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
934                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"></path>
935                        </svg>
936                    </div>
937
938                    <!-- Title -->
939                    <h3 class="text-lg md:text-xl font-semibold text-gray-900 transition-colors duration-200">
940                        Principales funciones
941                    </h3>
942                </div>
943
944                <!-- Chevron Arrow -->
945                <div class="flex-shrink-0">
946                    <svg class="accordion-chevron w-5 h-5 text-gray-400 transition-transform duration-300"
947                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
948                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
949                    </svg>
950                </div>
951            </div>
952        </button>
953
954        <!-- Accordion Content -->
955        <div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out"
956             id="accordion-content-2">
957            <div class="px-6 pb-6 pt-2">
958                <div class="pl-12"> <!-- Indent to align with title -->
959                    <div class="prose prose-gray max-w-none">
960                        <p data-block-key="e378a"><b><i>
960El Concejo debe normar, resolver, y fiscalizar.<br/><br/></i></b><b>El concejo debe dar su acuerdo para normar, a requerimiento del alcalde, lo siguiente:</b></p><ul><li data-block-key="uh68k">Aprobar el plan comunal de desarrollo, el presupuesto municipal y los de salud y educación, los programas de inversión, el plan regulador comunal y las políticas de recursos humanos, prestación de servicios municipales y de concesiones, permisos y licitaciones.</li><li data-block-key="izsoo">Dictar las ordenanzas municipales y el reglamento que establecen la organización interna del municipio.</li><li data-block-key="s7s5b">Resolver materias en que las leyes exigen acuerdo del concejo.</li></ul><p data-block-key="92f4p"><b>Fiscalizar:</b></p><ul><li data-block-key="0mwhn">El cumplimiento de los planes y programas de inversión municipal.</li><li data-block-key="glebv">La ejecución del presupuesto.</li><li data-block-key="ahyis">La gestión del alcalde, especialmente para verificar que los actos municipales se hayan ajustado a las políticas, normas y acuerdos adoptados por el concejo.</li></ul><p data-block-key="ulpnz">Más información en <a href="https://www.bcn.cl/leyfacil/recurso/concejales">Biblioteca del Congreso Nacional</a></p>
961                    </div>
962                </div>
963            </div>
964        </div>
965    </div>
966    
967</div>
968
969<!-- JavaScript for Accordion Functionality -->
970<script>
971function toggleAccordion(header) {
972    const content = header.nextElementSibling;
973    const isOpen = header.getAttribute('aria-expanded') === 'true';
974    const iconPlus = header.querySelector('.accordion-icon-plus');
975    const iconMinus = header.querySelector('.accordion-icon-minus');
976    const chevron = header.querySelector('.accordion-chevron');
977    const iconContainer = header.querySelector('.w-8.h-8');
978
979    // Close all other accordions (optional - remove for multi-open)
980    const allHeaders = document.querySelectorAll('.accordion-header');
981    allHeaders.forEach(otherHeader => {
982        if (otherHeader !== header) {
983            const otherContent = otherHeader.nextElementSibling;
984            const otherIconPlus = otherHeader.querySelector('.accordion-icon-plus');
985            const otherIconMinus = otherHeader.querySelector('.accordion-icon-minus');
986            const otherChevron = otherHeader.querySelector('.accordion-chevron');
987            const otherIconContainer = otherHeader.querySelector('.w-8.h-8');
988
989            otherHeader.setAttribute('aria-expanded', 'false');
990            otherContent.style.maxHeight = '0px';
991            otherIconPlus.style.opacity = '1';
992            otherIconMinus.style.opacity = '0';
993            otherChevron.style.transform = 'rotate(0deg)';
994            otherIconContainer.classList.remove('bg-orange-500');
995            otherIconContainer.classList.add('bg-orange-100');
996        }
997    });
998
999    if (isOpen) {
1000        // Close this accordion
1001        header.setAttribute('aria-expanded', 'false');
1002        content.style.maxHeight = '0px';
1003        iconPlus.style.opacity = '1';
1004        iconMinus.style.opacity = '0';
1005        chevron.style.transform = 'rotate(0deg)';
1006        iconContainer.classList.remove('bg-orange-500');
1007        iconContainer.classList.add('bg-orange-100');
1008    } else {
1009        // Open this accordion
1010        header.setAttribute('aria-expanded', 'true');
1011        content.style.maxHeight = content.scrollHeight + 'px';
1012        iconPlus.style.opacity = '0';
1013        iconMinus.style.opacity = '1';
1014        chevron.style.transform = 'rotate(180deg)';
1015        iconContainer.classList.remove('bg-orange-100');
1016        iconContainer.classList.add('bg-orange-500');
1017    }
1018}
1019
1020// Initialize accordions
1021document.addEventListener('DOMContentLoaded', function() {
1022    // Optional: Open first accordion by default
1023    // const firstAccordion = document.querySelector('.accordion-header');
1024    // if (firstAccordion) {
1025    //     toggleAccordion(firstAccordion);
1026    // }
1027});
1028</script>
1028
1029
1030<!-- Alternative Version: Multi-open Accordion -->
1031
1032
1033<!-- CSS for smooth animations (optional enhancement) -->
1034<style>
1035.accordion-content {
1036    transition: max-height 0.3s ease-in-out;
1037}
1038
1039.accordion-header:hover .accordion-chevron {
1040    color: #f97316; /* orange-500 */
1041}
1042
1043@media (prefers-reduced-motion: reduce) {
1044    .accordion-content,
1045    .accordion-icon-plus,
1046    .accordion-icon-minus,
1047    .accordion-chevron {
1048        transition: none;
1049    }
1050}
1051</style>
1052
1053                                </div>
1054                                
1055                            
1056
1057                                <!-- Heading 2 -->
1058                                
1059                                <div class="my-8">
1060                                    
1061    <div class="divider divider-sm divider-center">
1062        <i class="icon-circle"></i>    
1063    </div>
1064
1065
1066                                </div>
1067                                
1068                            
1069
1070                                <!-- Heading 2 -->
1071                                
1072                                <div class="my-8">
1073                                    
1074    <div class="my-8 md:my-10 title-block">
1075        <h1 class="text-2xl md:text-3xl font-bold text-gray-900">
1076            Integrantes del Concejo Municipal
1077        </h1>
1078        
1079    </div>
1080
1081
1082                                </div>
1083                                
1084                            
1085
1086                                <!-- Heading 2 -->
1087                                
1088                                <div class="my-8">
1089                                    
1090<div class="row col-mb-50 mb-0">
1091    
1092    <div class="col-lg-6">
1093        
1094
1095<!-- Team Member Card -->
1096<div class="team-member-card">
1097
1098    <!-- Divider (only when not in group format) -->
1099    
1100
1101    <!-- Team Member Content -->
1102    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-300">
1103        <div class="p-6">
1104            <div class="flex flex-col sm:flex-row gap-6">
1105
1106                <!-- Profile Image -->
1107                <div class="flex-shrink-0 self-start">
1108                    <div class="relative">
1109                        
1110                            
1111                            <img src="https://cdn.sanjosedemaipo.cl/images/DSC02045.2e16d0ba.fill-100x100.format-avif.avif"
1112                                 alt="DSC02045"
1113                                 class="w-24 h-24 rounded-xl object-cover border-2 border-gray-200 shadow-sm">
1114                        
1115
1116                        <!-- Online Status Indicator (optional) -->
1117                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
1118                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
1119                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
1120                            </svg>
1121                        </div>
1122                    </div>
1123                </div>
1124
1125                <!-- Member Info -->
1126                <div class="flex-1 min-w-0">
1127
1128                    <!-- Name and Position -->
1129                    <div class="mb-4">
1130                        <h4 class="text-xl md:text-2xl font-bold text-gray-900 mb-1">
1131                            Constanza Fernanda González González
1132                        </h4>
1133                        
1134                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
1135                            Concejal
1136                        </span>
1137                        
1138                    </div>
1139
1140                    <!-- Description -->
1141                    
1142
1143                    <!-- Contact Information -->
1144                    <div class="space-y-3 mb-6">
1145                        
1146                        <div class="flex items-center gap-3">
1147                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
1148                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1149                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
1150                                </svg>
1151                            </div>
1152                            <a href="mailto:[email protected]"
1153                               class="text-sm text-gray-600 hover:text-blue-600 transition-colors duration-200 truncate">
1154                                [email protected]
1155                            </a>
1156                        </div>
1157                        
1158
1159                        
1160                    </div>
1161
1162                    <!-- Social Media Links -->
1163                    
1164                </div>
1165            </div>
1166        </div>
1167    </div>
1168
1169    <!-- Bottom Divider (only when not in group format) -->
1170    
1171</div>
1172
1173<!-- Alternative: Compact Version -->
1174
1175
1176    </div>
1177    
1178    <div class="col-lg-6">
1179        
1180
1181<!-- Team Member Card -->
1182<div class="team-member-card">
1183
1184    <!-- Divider (only when not in group format) -->
1185    
1186
1187    <!-- Team Member Content -->
1188    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-300">
1189        <div class="p-6">
1190            <div class="flex flex-col sm:flex-row gap-6">
1191
1192                <!-- Profile Image -->
1193                <div class="flex-shrink-0 self-start">
1194                    <div class="relative">
1195                        
1196                            
1197                            <img src="https://cdn.sanjosedemaipo.cl/images/DSC02019.2e16d0ba.fill-100x100.format-avif.avif"
1198                                 alt="DSC02019"
1199                                 class="w-24 h-24 rounded-xl object-cover border-2 border-gray-200 shadow-sm">
1200                        
1201
1202                        <!-- Online Status Indicator (optional) -->
1203                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
1204                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
1205                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
1206                            </svg>
1207                        </div>
1208                    </div>
1209                </div>
1210
1211                <!-- Member Info -->
1212                <div class="flex-1 min-w-0">
1213
1214                    <!-- Name and Position -->
1215                    <div class="mb-4">
1216                        <h4 class="text-xl md:text-2xl font-bold text-gray-900 mb-1">
1217                            Camila Ester Barahona Ramirez
1218                        </h4>
1219                        
1220                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
1221                            Concejal
1222                        </span>
1223                        
1224                    </div>
1225
1226                    <!-- Description -->
1227                    
1228                    <div class="prose prose-sm prose-gray max-w-none mb-6 text-gray-600">
1229                        <p data-block-key="r2wp1"></p><p data-block-key="5ehjg">Presidenta comisión Organizaciones Comunitarias y Deportes</p><p data-block-key="tqtf">Partido Político independiente<br/></p>
1230                    </div>
1231                    
1232
1233                    <!-- Contact Information -->
1234                    <div class="space-y-3 mb-6">
1235                        
1236                        <div class="flex items-center gap-3">
1237                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
1238                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1239                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
1240                                </svg>
1241                            </div>
1242                            <a href="mailto:[email protected]"
1243                               class="text-sm text-gray-600 hover:text-blue-600 transition-colors duration-200 truncate">
1244                                [email protected]
1245                            </a>
1246                        </div>
1247                        
1248
1249                        
1250                        <div class="flex items-center gap-3">
1251                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
1252                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1253                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
1254                                </svg>
1255                            </div>
1256                            <a href="tel:953696124"
1257                               class="text-sm text-gray-600 hover:text-green-600 transition-colors duration-200">
1258                                953696124
1259                            </a>
1260                        </div>
1261                        
1262                    </div>
1263
1264                    <!-- Social Media Links -->
1265                    
1266                </div>
1267            </div>
1268        </div>
1269    </div>
1270
1271    <!-- Bottom Divider (only when not in group format) -->
1272    
1273</div>
1274
1275<!-- Alternative: Compact Version -->
1276
1277
1278    </div>
1279    
1280    <div class="col-lg-6">
1281        
1282
1283<!-- Team Member Card -->
1284<div class="team-member-card">
1285
1286    <!-- Divider (only when not in group format) -->
1287    
1288
1289    <!-- Team Member Content -->
1290    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-300">
1291        <div class="p-6">
1292            <div class="flex flex-col sm:flex-row gap-6">
1293
1294                <!-- Profile Image -->
1295                <div class="flex-shrink-0 self-start">
1296                    <div class="relative">
1297                        
1298                            
1299                            <img src="https://cdn.sanjosedemaipo.cl/images/DSC02031.2e16d0ba.fill-100x100.format-avif.avif"
1300                                 alt="DSC02031"
1301                                 class="w-24 h-24 rounded-xl object-cover border-2 border-gray-200 shadow-sm">
1302                        
1303
1304                        <!-- Online Status Indicator (optional) -->
1305                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
1306                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
1307                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
1308                            </svg>
1309                        </div>
1310                    </div>
1311                </div>
1312
1313                <!-- Member Info -->
1314                <div class="flex-1 min-w-0">
1315
1316                    <!-- Name and Position -->
1317                    <div class="mb-4">
1318                        <h4 class="text-xl md:text-2xl font-bold text-gray-900 mb-1">
1319                            Maite Cecilia Birke Abaroa
1320                        </h4>
1321                        
1322                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
1323                            Concejal
1324                        </span>
1325                        
1326                    </div>
1327
1328                    <!-- Description -->
1329                    
1330
1331                    <!-- Contact Information -->
1332                    <div class="space-y-3 mb-6">
1333                        
1334                        <div class="flex items-center gap-3">
1335                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
1336                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1337                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
1338                                </svg>
1339                            </div>
1340                            <a href="mailto:[email protected]"
1341                               class="text-sm text-gray-600 hover:text-blue-600 transition-colors duration-200 truncate">
1342                                [email protected]
1343                            </a>
1344                        </div>
1345                        
1346
1347                        
1348                    </div>
1349
1350                    <!-- Social Media Links -->
1351                    
1352                </div>
1353            </div>
1354        </div>
1355    </div>
1356
1357    <!-- Bottom Divider (only when not in group format) -->
1358    
1359</div>
1360
1361<!-- Alternative: Compact Version -->
1362
1363
1364    </div>
1365    
1366    <div class="col-lg-6">
1367        
1368
1369<!-- Team Member Card -->
1370<div class="team-member-card">
1371
1372    <!-- Divider (only when not in group format) -->
1373    
1374
1375    <!-- Team Member Content -->
1376    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-300">
1377        <div class="p-6">
1378            <div class="flex flex-col sm:flex-row gap-6">
1379
1380                <!-- Profile Image -->
1381                <div class="flex-shrink-0 self-start">
1382                    <div class="relative">
1383                        
1384                            
1385                            <img src="https://cdn.sanjosedemaipo.cl/images/DSC02039.2e16d0ba.fill-100x100.format-avif.avif"
1386                                 alt="DSC02039"
1387                                 class="w-24 h-24 rounded-xl object-cover border-2 border-gray-200 shadow-sm">
1388                        
1389
1390                        <!-- Online Status Indicator (optional) -->
1391                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
1392                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
1393                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
1394                            </svg>
1395                        </div>
1396                    </div>
1397                </div>
1398
1399                <!-- Member Info -->
1400                <div class="flex-1 min-w-0">
1401
1402                    <!-- Name and Position -->
1403                    <div class="mb-4">
1404                        <h4 class="text-xl md:text-2xl font-bold text-gray-900 mb-1">
1405                            Luis Vargas Sandoval
1406                        </h4>
1407                        
1408                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
1409                            Concejal
1410                        </span>
1411                        
1412                    </div>
1413
1414                    <!-- Description -->
1415                    
1416                    <div class="prose prose-sm prose-gray max-w-none mb-6 text-gray-600">
1417                        <p data-block-key="iuryp">&quot;Comisión Presupuesto, Desarrollo, Economía local&quot;</p><p data-block-key="dc8o0">Electo bajo el Partido Socialista.</p>
1418                    </div>
1419                    
1420
1421                    <!-- Contact Information -->
1422                    <div class="space-y-3 mb-6">
1423                        
1424                        <div class="flex items-center gap-3">
1425                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
1426                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1427                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
1428                                </svg>
1429                            </div>
1430                            <a href="mailto:[email protected]"
1431                               class="text-sm text-gray-600 hover:text-blue-600 transition-colors duration-200 truncate">
1432                                [email protected]
1433                            </a>
1434                        </div>
1435                        
1436
1437                        
1438                        <div class="flex items-center gap-3">
1439                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
1440                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1441                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 
144111.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
1442                                </svg>
1443                            </div>
1444                            <a href="tel:965647377"
1445                               class="text-sm text-gray-600 hover:text-green-600 transition-colors duration-200">
1446                                965647377
1447                            </a>
1448                        </div>
1449                        
1450                    </div>
1451
1452                    <!-- Social Media Links -->
1453                    
1454                </div>
1455            </div>
1456        </div>
1457    </div>
1458
1459    <!-- Bottom Divider (only when not in group format) -->
1460    
1461</div>
1462
1463<!-- Alternative: Compact Version -->
1464
1465
1466    </div>
1467    
1468    <div class="col-lg-6">
1469        
1470
1471<!-- Team Member Card -->
1472<div class="team-member-card">
1473
1474    <!-- Divider (only when not in group format) -->
1475    
1476
1477    <!-- Team Member Content -->
1478    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-300">
1479        <div class="p-6">
1480            <div class="flex flex-col sm:flex-row gap-6">
1481
1482                <!-- Profile Image -->
1483                <div class="flex-shrink-0 self-start">
1484                    <div class="relative">
1485                        
1486                            
1487                            <img src="https://cdn.sanjosedemaipo.cl/images/DSC02025.2e16d0ba.fill-100x100.format-avif.avif"
1488                                 alt="DSC02025"
1489                                 class="w-24 h-24 rounded-xl object-cover border-2 border-gray-200 shadow-sm">
1490                        
1491
1492                        <!-- Online Status Indicator (optional) -->
1493                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
1494                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
1495                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
1496                            </svg>
1497                        </div>
1498                    </div>
1499                </div>
1500
1501                <!-- Member Info -->
1502                <div class="flex-1 min-w-0">
1503
1504                    <!-- Name and Position -->
1505                    <div class="mb-4">
1506                        <h4 class="text-xl md:text-2xl font-bold text-gray-900 mb-1">
1507                            Diego Trincado Herrera
1508                        </h4>
1509                        
1510                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
1511                            Concejal
1512                        </span>
1513                        
1514                    </div>
1515
1516                    <!-- Description -->
1517                    
1518                    <div class="prose prose-sm prose-gray max-w-none mb-6 text-gray-600">
1519                        <p data-block-key="8v6a0">Presidente de la Comisión “Turismo y Medio ambiente&quot;.</p><p data-block-key="cf63c">Electo bajo el Pacto de FA, Subpacto RD e independientes.</p>
1520                    </div>
1521                    
1522
1523                    <!-- Contact Information -->
1524                    <div class="space-y-3 mb-6">
1525                        
1526                        <div class="flex items-center gap-3">
1527                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
1528                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1529                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
1530                                </svg>
1531                            </div>
1532                            <a href="mailto:[email protected]"
1533                               class="text-sm text-gray-600 hover:text-blue-600 transition-colors duration-200 truncate">
1534                                [email protected]
1535                            </a>
1536                        </div>
1537                        
1538
1539                        
1540                        <div class="flex items-center gap-3">
1541                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
1542                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1543                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 
154311.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
1544                                </svg>
1545                            </div>
1546                            <a href="tel:996285555"
1547                               class="text-sm text-gray-600 hover:text-green-600 transition-colors duration-200">
1548                                996285555
1549                            </a>
1550                        </div>
1551                        
1552                    </div>
1553
1554                    <!-- Social Media Links -->
1555                    
1556                    <div class="flex items-center gap-3">
1557                        <span class="text-sm font-medium text-gray-500">Síguenos:</span>
1558                        <div class="flex items-center gap-2">
1559                            
1560                            <a href="https://www.facebook.com/"
1561                               target="_blank"
1562                               rel="noopener noreferrer"
1563                               class="w-8 h-8 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-110">
1564                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
1565                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
1566                                </svg>
1567                            </a>
1568                            
1569
1570                            
1571                            <a href="https://twitter.com/"
1572                               target="_blank"
1573                               rel="noopener noreferrer"
1574                               class="w-8 h-8 bg-sky-500 hover:bg-sky-600 text-white rounded-lg flex items-center justify-center transition-all duration-200 transform hover:scale-110">
1575                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
1576                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
1577                                </svg>
1578                            </a>
1579                            
1580
1581                            
1582                        </div>
1583                    </div>
1584                    
1585                </div>
1586            </div>
1587        </div>
1588    </div>
1589
1590    <!-- Bottom Divider (only when not in group format) -->
1591    
1592</div>
1593
1594<!-- Alternative: Compact Version -->
1595
1596
1597    </div>
1598    
1599    <div class="col-lg-6">
1600        
1601
1602<!-- Team Member Card -->
1603<div class="team-member-card">
1604
1605    <!-- Divider (only when not in group format) -->
1606    
1607
1608    <!-- Team Member Content -->
1609    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-300">
1610        <div class="p-6">
1611            <div class="flex flex-col sm:flex-row gap-6">
1612
1613                <!-- Profile Image -->
1614                <div class="flex-shrink-0 self-start">
1615                    <div class="relative">
1616                        
1617                            
1618                            <img src="https://cdn.sanjosedemaipo.cl/images/DSC02016.2e16d0ba.fill-100x100.format-avif.avif"
1619                                 alt="DSC02016"
1620                                 class="w-24 h-24 rounded-xl object-cover border-2 border-gray-200 shadow-sm">
1621                        
1622
1623                        <!-- Online Status Indicator (optional) -->
1624                        <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-400 rounded-full border-2 border-white shadow-sm flex items-center justify-center">
1625                            <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
1626                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
1627                            </svg>
1628                        </div>
1629                    </div>
1630                </div>
1631
1632                <!-- Member Info -->
1633                <div class="flex-1 min-w-0">
1634
1635                    <!-- Name and Position -->
1636                    <div class="mb-4">
1637                        <h4 class="text-xl md:text-2xl font-bold text-gray-900 mb-1">
1638                            Anthony Lawrence Prior Carvajal
1639                        </h4>
1640                        
1641                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
1642                            Concejal
1643                        </span>
1644                        
1645                    </div>
1646
1647                    <!-- Description -->
1648                    
1649
1650                    <!-- Contact Information -->
1651                    <div class="space-y-3 mb-6">
1652                        
1653                        <div class="flex items-center gap-3">
1654                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
1655                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1656                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
1657                                </svg>
1658                            </div>
1659                            <a href="mailto:[email protected]"
1660                               class="text-sm text-gray-600 hover:text-blue-600 transition-colors duration-200 truncate">
1661                                [email protected]
1662                            </a>
1663                        </div>
1664                        
1665
1666                        
1667                    </div>
1668
1669                    <!-- Social Media Links -->
1670                    
1671                </div>
1672            </div>
1673        </div>
1674    </div>
1675
1676    <!-- Bottom Divider (only when not in group format) -->
1677    
1678</div>
1679
1680<!-- Alternative: Compact Version -->
1681
1682
1683    </div>
1684    
1685</div>
1686
1687
1688                                </div>
1689                                
1690                            
1691
1692                                <!-- Heading 2 -->
1693                                
1694                                <div class="my-8">
1695                                    
1696    <div class="divider divider-md divider-center">
1697        <i class="icon-circle"></i>    
1698    </div>
1699
1700
1701                                </div>
1702                                
1703                            
1704
1705                        </div>
1706                    </div>
1707
1708                    <!-- Sidebar -->
1709                    <aside class="lg:col-span-3">
1710                        <div class="lg:sticky lg:top-8 space-y-6">
1711
1712                            <!-- Table of Contents -->
1713                            
1714
1715                            <!-- Sidebar News Widget -->
1716                            <div class="group bg-gradient-to-br from-blue-50 via-white to-white rounded-2xl shadow-lg hover:shadow-xl border border-blue-100 p-6 transition-all duration-300 hover:border-blue-300">
1717                                <!-- Header con icono animado -->
1718                                <div class="flex items-center gap-3 mb-6 pb-4 border-b border-blue-100">
1719                                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center group-hover:bg-blue-500 transition-colors duration-300">
1720                                        <svg class="w-5 h-5 text-blue-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1721                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
1722                                        </svg>
1723                                    </div>
1724                                    <h3 class="text-lg font-bold text-gray-900">
1725                                        Últimas Noticias
1726                                    </h3>
1727                                </div>
1728
1729                                <div class="sidebar-content">
1730                                    
1731
1732
1733<div>
1734    <div class="space-y-3" id="recent-post-list-sidebar">
1735        
1736            <article class="group border-b border-gray-100 last:border-0 pb-3 last:pb-0">
1737                <a href="/noticias/2026/09/28/ugrd-participa-en-jornada-de-formacion-sobre-emergencias-asociadas-a-baterias-de-litio/" class="flex gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50">
1738                    <div class="flex-shrink-0">
1739                        <div class="w-20 h-20 rounded-lg overflow-hidden bg-gray-200">
1740                            
1741                                <img alt="IMG_0645" class="w-full h-full object-cover" height="80" src="https://cdn.sanjosedemaipo.cl/images/IMG_0645.2e16d0ba.fill-80x80.format-avif.avif" width="80">
1742                            
1743                        </div>
1744                    </div>
1745                    <div class="flex-1 min-w-0">
1746                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">
1747                            UGRD participa en jornada de formación sobre emergencias asociadas a baterías de litio
1748                        </h4>
1749                        <time class="text-xs text-gray-500 flex items-center gap-1">
1750                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1751                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
1752                            </svg>
1753                            28/09/2026
1754                        </time>
1755                    </div>
1756                </a>
1757            </article>
1758        
1759            <article class="group border-b border-gray-100 last:border-0 pb-3 last:pb-0">
1760                <a href="/noticias/2026/09/26/voces-del-bosque-lleno-de-musica-la-parroquia-san-jose-de-maipo/" class="flex gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50">
1761                    <div class="flex-shrink-0">
1762                        <div class="w-20 h-20 rounded-lg overflow-hidden bg-gray-200">
1763                            
1764                                <img alt="_XNC7107Comunicaciones SJDM" class="w-full h-full object-cover" height="80" src="https://cdn.sanjosedemaipo.cl/images/_XNC7107Comunicaciones_.2e16d0ba.fill-80x80.format-avif.avif" width="80">
1765                            
1766                        </div>
1767                    </div>
1768                    <div class="flex-1 min-w-0">
1769                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">
1770                            🎼 “Voces del Bosque” llenó de música la Parroquia San José de Maipo
1771                        </h4>
1772                        <time class="text-xs text-gray-500 flex items-center gap-1">
1773                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1774                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
1775                            </svg>
1776                            26/09/2026
1777                        </time>
1778                    </div>
1779                </a>
1780            </article>
1781        
1782            <article class="group border-b border-gray-100 last:border-0 pb-3 last:pb-0">
1783                <a href="/noticias/2026/09/24/subcomisaria-de-san-jose-de-maipo-realizo-su-cuenta-publica-2026/" class="flex gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50">
1784                    <div class="flex-shrink-0">
1785                        <div class="w-20 h-20 rounded-lg overflow-hidden bg-gray-200">
1786                            
1787                                <img alt="_XNC6991Comunicaciones SJDM" class="w-full h-full object-cover" height="80" src="https://cdn.sanjosedemaipo.cl/images/_XNC6991Comunicaciones_.2e16d0ba.fill-80x80.format-avif.avif" width="80">
1788                            
1789                        </div>
1790                    </div>
1791                    <div class="flex-1 min-w-0">
1792                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">
1793                            Subcomisaría de San José de Maipo realizó su Cuenta Pública 2026
1794                        </h4>
1795                        <time class="text-xs text-gray-500 flex items-center gap-1">
1796                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1797                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
1798                            </svg>
1799                            24/09/2026
1800                        </time>
1801                    </div>
1802                </a>
1803            </article>
1804        
1805            <article class="group border-b border-gray-100 last:border-0 pb-3 last:pb-0">
1806                <a href="/noticias/2026/09/24/subcomisaria-de-san-jose-de-maipo-realizo-su-cuenta-publica-2026-2/" class="flex gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50">
1807                    <div class="flex-shrink-0">
1808                        <div class="w-20 h-20 rounded-lg overflow-hidden bg-gray-200">
1809                            
1810                                <img alt="_XNC6991Comunicaciones SJDM" class="w-full h-full object-cover" height="80" src="https://cdn.sanjosedemaipo.cl/images/_XNC6991Comunicaciones_.2e16d0ba.fill-80x80.format-avif.avif" width="80">
1811                            
1812                        </div>
1813                    </div>
1814                    <div class="flex-1 min-w-0">
1815                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">
1816                            Subcomisaría de San José de Maipo realizó su Cuenta Pública 2026
1817                        </h4>
1818                        <time class="text-xs text-gray-500 flex items-center gap-1">
1819                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1820                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
1821                            </svg>
1822                            24/09/2026
1823                        </time>
1824                    </div>
1825                </a>
1826            </article>
1827        
1828            <article class="group border-b border-gray-100 last:border-0 pb-3 last:pb-0">
1829                <a href="/noticias/2026/09/14/san-jose-de-maipo-celebro-sus-fiestas-patrias-con-tradicional-desfile-comunal/" class="flex gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50">
1830                    <div class="flex-shrink-0">
1831                        <div class="w-20 h-20 rounded-lg overflow-hidden bg-gray-200">
1832                            
1833                                <img alt="DSC06531Comunicaciones SJDM" class="w-full h-full object-cover" height="80" src="https://cdn.sanjosedemaipo.cl/images/DSC06531Comunicaciones_.2e16d0ba.fill-80x80.format-avif.avif" width="80">
1834                            
1835                        </div>
1836                    </div>
1837                    <div class="flex-1 min-w-0">
1838                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">
1839                            San José de Maipo celebró sus Fiestas Patrias con tradicional desfile comunal
1840                        </h4>
1841                        <time class="text-xs text-gray-500 flex items-center gap-1">
1842                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1843                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
1844                            </svg>
1845                            14/09/2026
1846                        </time>
1847                    </div>
1848                </a>
1849            </article>
1850        
1851            <article class="group border-b border-gray-100 last:border-0 pb-3 last:pb-0">
1852                <a href="/noticias/2026/09/14/colegio-rafael-eyzaguirre-tradicion-y-comunidad-en-la-gala-folclorica-2026/" class="flex gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50">
1853                    <div class="flex-shrink-0">
1854                        <div class="w-20 h-20 rounded-lg overflow-hidden bg-gray-200">
1855                            
1856                                <img alt="_XNC6658Comunicaciones SJDM (1)" class="w-full h-full object-cover" height="80" src="https://cdn.sanjosedemaipo.cl/images/_XNC6658Comunicaciones_.2e16d0ba.fill-80x80.format-avif.avif" width="80">
1857                            
1858                        </div>
1859                    </div>
1860                    <div class="flex-1 min-w-0">
1861                        <h4 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">
1862                            Colegio Rafael Eyzaguirre: Tradición y comunidad en la Gala Folclórica 2026
1863                        </h4>
1864                        <time class="text-xs text-gray-500 flex items-center gap-1">
1865                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1866                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
1867                            </svg>
1868                            14/09/2026
1869                        </time>
1870                    </div>
1871                </a>
1872            </article>
1873        
1874    </div>
1875</div>
1876
1877                                </div>
1878                            </div>
1879                        </div>
1880                    </aside>
1881                </div>
1882            </div>
1883        </div>
1884
1885        <!-- Banners Section -->
1886        
1887
1888    </section>
1889
1890    <!-- Reading Progress Script -->
1891    
1891<script>
1892        document.addEventListener('DOMContentLoaded', function() {
1893            const progressBar = document.getElementById('progress-bar');
1894            const progressText = document.getElementById('reading-progress');
1895
1896            if (progressBar && progressText) {
1897                window.addEventListener('scroll', function() {
1898                    const article = document.querySelector('article');
1899                    if (!article) return;
1900
1901                    const articleTop = article.offsetTop;
1902                    const articleHeight = article.offsetHeight;
1903                    const windowHeight = window.innerHeight;
1904                    const scrollY = window.scrollY;
1905
1906                    const progress = Math.min(100, Math.max(0,
1907                        ((scrollY - articleTop + windowHeight) / articleHeight) * 100
1908                    ));
1909
1910                    progressBar.style.width = progress + '%';
1911                    progressText.textContent = Math.round(progress) + '%';
1912                });
1913            }
1914        });
1915    </script>
1915
1916
1917
1918    
1919        
1920
1921<!-- Sección Informaciones y Emergencias -->
1922
1923
1924<section class="informaciones-emergencias bg-[#0d3a6b] py-12">
1925    <div class="container mx-auto px-4">
1926        <!-- Título de la sección -->
1927        <div class="relative flex items-center justify-center mb-10">
1928            <div class="absolute left-0 right-0 h-[1px] bg-white/30"></div>
1929            <h2 class="relative bg-[#0d3a6b] px-6 text-white text-xl md:text-2xl font-light tracking-wider">
1930                Informaciones &amp; Emergencias
1931            </h2>
1932        </div>
1933
1934        <!-- Grid de botones/enlaces -->
1935        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8">
1936        
1937            <a href="#"
1938               
1939               onclick="window.denunciasWidget.open()"
1940               
1941               class="info-emergencia-item group flex items-center gap-3 text-white hover:text-white/80 transition-colors">
1942                <div class="flex-shrink-0">
1943                    <span class="material-symbols-outlined text-4xl md:text-5xl ">edit_document</span>
1944                </div>
1945                <div class="flex flex-col">
1946                    <span class="font-semibold text-sm md:text-base leading-tight">Denuncias Anónima</span>
1947                    
1948                    <span class="text-xs text-white/70 leading-tight">Formulario de denuncias</span>
1949                    
1950                </div>
1951            </a>
1952        
1953            <a href="https://oirs.sanjosedemaipo.cl"
1954               
1955               class="info-emergencia-item group flex items-center gap-3 text-white hover:text-white/80 transition-colors">
1956                <div class="flex-shrink-0">
1957                    <span class="material-symbols-outlined text-4xl md:text-5xl ">contact_support</span>
1958                </div>
1959                <div class="flex flex-col">
1960                    <span class="font-semibold text-sm md:text-base leading-tight">OIRS Digital</span>
1961                    
1962                    <span class="text-xs text-white/70 leading-tight">Oficina de Informaciones, Reclamos y Sugerencias</span>
1963                    
1964                </div>
1965            </a>
1966        
1967            <a href="/municipalidad/directorio-telefonico/"
1968               
1969               class="info-emergencia-item group flex items-center gap-3 text-white hover:text-white/80 transition-colors">
1970                <div class="flex-shrink-0">
1971                    <span class="material-symbols-outlined text-4xl md:text-5xl ">call_log</span>
1972                </div>
1973                <div class="flex flex-col">
1974                    <span class="font-semibold text-sm md:text-base leading-tight">Directorio telefónico</span>
1975                    
1976                    <span class="text-xs text-white/70 leading-tight">Unidades y departamentos</span>
1977                    
1978                </div>
1979            </a>
1980        
1981            <a href="tel:56226784900"
1982               
1983               class="info-emergencia-item group flex items-center gap-3 text-white hover:text-white/80 transition-colors">
1984                <div class="flex-shrink-0">
1985                    <span class="material-symbols-outlined text-4xl md:text-5xl ">phone_in_talk</span>
1986                </div>
1987                <div class="flex flex-col">
1988                    <span class="font-semibold text-sm md:text-base leading-tight">Teléfono municipal</span>
1989                    
1990                    <span class="text-xs text-white/70 leading-tight">226784900</span>
1991                    
1992                </div>
1993            </a>
1994        
1995            <a href="tel:56226784923"
1996               
1997               class="info-emergencia-item group flex items-center gap-3 text-white hover:text-white/80 transition-colors">
1998                <div class="flex-shrink-0">
1999                    <span class="material-symbols-outlined text-4xl md:text-5xl ">e911_emergency</span>
2000                </div>
2001                <div class="flex flex-col">
2002                    <span class="font-semibold text-sm md:text-base leading-tight">Seguridad y emergencia</span>
2003                    
2004                    <span class="text-lg md:text-xl font-bold leading-tight">226784923</span>
2005                    
2006                </div>
2007            </a>
2008        
2009        </div>
2010
2011    </div>
2012</section>
2013
2014
2015<script>
2016// Script para abrir el modal OIRS con el tipo de formulario correspondiente
2017document.addEventListener('DOMContentLoaded', function() {
2018    const oirsTriggers = document.querySelectorAll('[data-oirs-trigger]');
2019
2020    oirsTriggers.forEach(trigger => {
2021        trigger.addEventListener('click', function(e) {
2022            e.preventDefault();
2023            const formType = this.getAttribute('data-form-type');
2024
2025            // Buscar el microfrontend de OIRS y abrir con el tipo específico
2026            const oirsMicrofrontend = document.querySelector('[data-oirs-microfrontend]');
2027            if (oirsMicrofrontend && window.OIRSMicrofrontend) {
2028                window.OIRSMicrofrontend.open(formType);
2029            } else {
2030                // Fallback: abrir el botón flotante
2031                const floatingBtn = document.querySelector('.oirs-floating-button');
2032                if (floatingBtn) {
2033                    floatingBtn.click();
2034                }
2035            }
2036        });
2037    });
2038
2039    // Script para abrir el modal de Denuncias Anónimas
2040    const denunciasTriggers = document.querySelectorAll('[data-denuncias-trigger]');
2041
2042    denunciasTriggers.forEach(trigger => {
2043        trigger.addEventListener('click', function(e) {
2044            e.preventDefault();
2045            // Abrir el modal del microfrontend de denuncias
2046            if (window.denunciasWidget) {
2047                window.denunciasWidget.open();
2048            }
2049        });
2050    });
2051});
2052</script>
2052
2053
2054    
2055    
2056
2057
2058
2059<!-- Footer ============================================= -->
2060<footer class="bg-stone-500 text-gray-100 font-[Poppins]">
2061    <div class="max-w-7xl mx-auto px-8 py-12 grid grid-cols-1 md:grid-cols-12 gap-10">
2062
2063        <!-- Institucional -->
2064        <div class="md:col-span-3">
2065            
2066                <img alt="Footer_website@2x" class="w-52 mb-4" height="709" src="https://cdn.sanjosedemaipo.cl/images/Footer_website2x.original.format-avif.avif" width="709">
2067            
2068
2069            
2070            <p class="text-sm leading-6">
2071                Camino al Volcán N°19775,<br>
2072                San José de Maipo, RM.<br>
2073                Horario: Lun-Jue 8:30-17:30 / Vie 8:30-16:30<br>
2074                Teléfono: <a href="tel:+56226784900" class="underline hover:text-[#FF6A00] text-[#F3D71B]">+56 2 2678 4900</a><br>
2075                Emergencias: <a href="tel:+56226784923" class="underline hover:text-[#FF6A00] text-[#FF4141]">+56 2 2678 4923</a>
2076            </p>
2077
2078            <div class="flex space-x-4 pt-4">
2079                
2080                    <a href="https://web.facebook.com/Municipalida
2080ddeSanJosedeMaipo" class="social-icon" target="_blank" rel="noopener">
2081                        <img src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/facebook.svg" alt="Facebook" class="w-5 h-5">
2082                    </a>
2083                
2084
2085                
2086                    <a href="https://x.com/MuniSJdeMaipo" class="social-icon" target="_blank" rel="noopener">
2087                        <img src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/x.svg" alt="X" class="w-5 h-5">
2088                    </a>
2089                
2090
2091                
2092                    <a href="https://www.instagram.com/munisanjosedemaipo/" class="social-icon" target="_blank" rel="noopener">
2093                        <img src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/instagram.svg" alt="Instagram" class="w-5 h-5">
2094                    </a>
2095                
2096
2097                
2098                    <a href="https://www.youtube.com/@IlustreMunicipalidaddeSanJoseD" class="social-icon" target="_blank" rel="noopener">
2099                        <img src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/youtube.svg" alt="YouTube" class="w-5 h-5">
2100                    </a>
2101                
2102            </div>
2103        </div>
2104
2105        <!-- Menús + Certificaciones (columna central) -->
2106        <div class="md:col-span-6">
2107            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
2108                <!-- Atención Ciudadana -->
2109                <div>
2110                    
2111
2112<h3 class="font-semibold text-xl mb-4 border-b border-[#FF6A00] text-[#F1F5F8]">Atención Ciudadana</h3>
2113
2114<ul class="space-y-2 text-sm">
2115
2116    <li class="">
2117        <a href="https://oirs.sanjosedemaipo.cl/" class="text-white">Centro de Atención al Vecino en Línea</a>
2118        
2119    </li>
2120
2121    <li class="">
2122        <a href="https://comisariavirtual.cl/" class="text-white">Comisaría Virtual</a>
2123        
2124    </li>
2125
2126    <li class="">
2127        <a href="/municipalidad/directorio-telefonico/" class="text-white">Directorio telefónico</a>
2128        
2129    </li>
2130
2131    <li class="">
2132        <a href="https://www.portaltransparencia.cl/PortalPdT/pdtta?codOrganismo=MU292" class="text-white">Portal de transparencia</a>
2133        
2134    </li>
2135
2136    <li class="">
2137        <a href="https://www.registrocivil.cl/principal/servicios-en-linea" class="text-white">Registro Civil Servicios en Línea</a>
2138        
2139    </li>
2140
2141</ul>
2142
2143                </div>
2144
2145                <!-- Municipalidad y Gestión -->
2146                <div>
2147                    
2148
2149<h3 class="font-semibold text-xl mb-4 border-b border-[#FF6A00] text-[#F1F5F8]">
2149Municipalidad y Gestión</h3>
2150
2151<ul class="space-y-2 text-sm">
2152
2153    <li class="">
2154        <a href="/municipalidad/alcalde/" class="text-white">Alcalde</a>
2155        
2156    </li>
2157
2158    <li class="">
2159        <a href="/municipalidad/concejo/" class="text-white">Concejo Municipal</a>
2160        
2161    </li>
2162
2163    <li class="">
2164        <a href="/municipalidad/unidades-municipales/" class="text-white">Unidades Municipales</a>
2165        
2166    </li>
2167
2168    <li class="">
2169        <a href="/municipalidad/cuenta-publica/" class="text-white">Cuenta Pública</a>
2170        
2171    </li>
2172
2173    <li class="">
2174        <a href="/comuna/pladeco/" class="text-white">PLADECO</a>
2175        
2176    </li>
2177
2178    <li class="">
2179        <a href="https://biblioteca.sanjosedemaipo.cl/" class="text-white">Biblioteca</a>
2180        
2181    </li>
2182
2183</ul>
2184
2185                </div>
2186            </div>
2187
2188            <!-- Certificaciones: bajo los dos menús -->
2189            
2190            
2191                <div class="mt-8 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
2192                    
2193                        
2194                            <span title="SCAM" class="flex items-center justify-center h-16">
2195                                <img alt="SCAM" class="max-h-full max-w-full object-contain" height="715" src="https://cdn.sanjosedemaipo.cl/images/Logo_SCAM_Excelencia_MMA_1.original.avif" width="638">
2196                            </span>
2197                        
2198                    
2199                        
2200                            <span title="Sello comuna energética" class="flex items-center justify-center h-16">
2201                                <img alt="Sello comuna energética" class="max-h-full max-w-full object-contain" height="792" src="https://cdn.sanjosedemaipo.cl/images/Sello_comuna_energetica.original.avif" width="612">
2202                            </span>
2203                        
2204                    
2205                </div>
2206            
2207            
2208        </div>
2209
2210            <!-- Información del Alcalde -->
2211        <div class="md:col-span-3 bg-white bg-opacity-10 rounded-lg p-4 text-center shadow-xl">
2212
2213            
2214                <img alt="72c9d422-f4a0-487d-af02-36aae01f04a2" class="w-24 h-24 object-cover rounded-full mx-auto mb-3" height="200" src="https://cdn.sanjosedemaipo.cl/images/72c9d422-f4a0-487d-af02-.width-200.original.format-avif.avif" width="200">
2215            
2216            
2217
2218            
2219                <h3 class="font-semibold text-lg">Roberto Pérez Catalán</h3>
2220            
2221
2222            
2223                <p class="text-xs italic">Alcalde de San José de Maipo</p>
2224            
2225
2226            
2227                <p class="mt-2 text-sm">Comprometidos con el desarrollo sostenible y el bienestar de nuestra comunidad</p>
2228            
2229
2230            
2231        </div>
2232    </div>
2233
2234   <!-- Franja Inferior -->
2235    <div class="bg-stone-700 py-4">
2236        <div class="max-w-7xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-4">
2237            <div class="flex items-center space-x-4">
2238                
2239
2240<div class="w-full py-4">
2241  <div class="w-full px-4">
2242    <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 lg:gap-6">
2243      <!-- Clima Actual -->
2244      <div class="flex items-center gap-3">
2245        <div class="relative weather-icon w-12 h-12 cold">
2246          <object type="image/svg+xml" data="https://cdn.sanjosedemaipo.cl/web2025/icons/weather-animated/cloudDrizzleSunAlt.svg" class="w-full h-full">
2247            <img src="https://cdn.sanjosedemaipo.cl/web2025/icons/weather/cloudDrizzleSunAlt.svg" alt="Chubascos ligeros" class="w-full h-full">
2248          </object>
2249        </div>
2250        <div>
2251          <div class="text-2xl font-bold text-white">14°</div>
2252          <div class="text-xs text-white text-opacity-80">Chubascos ligeros</div>
2253        </div>
2254      </div>
2255
2256      <!-- Calidad del Aire -->
2257      
2258
2259
2260  <div class="flex items-center gap-2"
2261       title="Índice de Calidad del Aire (ICA) — Moderada">
2262    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold leading-none whitespace-nowrap"
2263          style="background-color: #FFD000; color: #1a1a1a;">
2264      <span>Aire 65</span>
2265      <span class="text-xs font-medium opacity-90">· Moderada</span>
2266    </span>
2267  </div>
2268
2269
2270
2271      <!-- Pronóstico Horizontal -->
2272      <div class="flex flex-wrap items-center gap-4 lg:gap-10 flex-1 lg:justify-end">
2273        <div class="text-xs text-white text-opacity-70 font-medium hidden sm:block">Pronóstico:</div>
2274
2275        <div class="flex items-center gap-2 lg:gap-4">
2276          <div class="relative weather-icon w-6 h-6 cold">
2277            <object type="image/svg+xml" data="https://cdn.sanjosedemaipo.cl/web2025/icons/weather-animated/cloudDrizzleSunAlt.svg" class="w-full h-full">
2278              <img src="https://cdn.sanjosedemaipo.cl/web2025/icons/weather/cloudDrizzleSunAlt.svg" alt="Temperatura" class="w-full h-full">
2279            </object>
2280          </div>
2281          <span class="text-sm text-white">
2282            <span class="font-semibold">16°</span>/<span class="text-white text-opacity-60">8°</span>
2283          </span>
2284        </div>
2285
2286        
2287          <div class="flex items-center gap-2 lg:gap-4">
2288            <div class="text-xs text-white text-opacity-70 font-medium">Sáb</div>
2289            <div class="relative weather-icon w-6 h-6 cold">
2290              <object type="image/svg+xml" data="https://cdn.sanjosedemaipo.cl/web2025/icons/weather-animated/cloudDrizzleSunAlt.svg" class="w-full h-full">
2291                <img src="https://cdn.sanjosedemaipo.cl/web2025/icons/weather/cloudDrizzleSunAlt.svg" alt="Chubascos ligeros" class="w-full h-full">
2292              </object>
2293            </div>
2294            <span class="text-sm text-white">
2295              <span class="font-semibold">15°</span>/<span class="text-white text-opacity-60">6°</span>
2296            </span>
2297          </div>
2298        
2299          <div class="flex items-center gap-2 lg:gap-4">
2300            <div class="text-xs text-white text-opacity-70 font-medium">Dom</div>
2301            <div class="relative weather-icon w-6 h-6 cold">
2302              <object type="image/svg+xml" data="https://cdn.sanjosedemaipo.cl/web2025/icons/weather-animated/cloudDrizzleSunAltFill.svg" class="w-full h-full">
2303                <img src="https://cdn.sanjosedemaipo.cl/web2025/icons/weather/cloudDrizzleSunAltFill.svg" alt="Llovizna ligera" class="w-full h-full">
2304              </object>
2305            </div>
2306            <span class="text-sm text-white">
2307              <span class="font-semibold">16°</span>/<span class="text-white text-opacity-60">7°</span>
2308            </span>
2309          </div>
2310        
2311          <div class="flex items-center gap-2 lg:gap-4">
2312            <div class="text-xs text-white text-opacity-70 font-medium">Lun</div>
2313            <div class="relative weather-icon w-6 h-6 cold">
2314              <object type="image/svg+xml" data="https://cdn.sanjosedemaipo.cl/web2025/icons/weather-animated/cloudRain.svg" class="w-full h-full">
2315                <img src="https://cdn.sanjosedemaipo.cl/web2025/icons/weather/cloudRain.svg" alt="Lluvia ligera" class="w-full h-full">
2316              </object>
2317            </div>
2318            <span class="text-sm text-white">
2319              <span class="font-semibold">18°</span>/<span class="text-white text-opacity-60">7°</span>
2320            </span>
2321          </div>
2322        
2323          <div class="flex items-center gap-2 lg:gap-4">
2324            <div class="text-xs text-white text-opacity-70 font-medium">Mar</div>
2325            <div class="relative weather-icon w-6 h-6 cold">
2326              <object type="image/svg+xml" data="https://cdn.sanjosedemaipo.cl/web2025/icons/weather-animated/cloudDrizzleSunAlt.svg" class="w-full h-full">
2327                <img src="https://cdn.sanjosedemaipo.cl/web2025/icons/weather/cloudDrizzleSunAlt.svg" alt="Chubascos ligeros" class="w-full h-full">
2328              </object>
2329            </div>
2330            <span class="text-sm text-white">
2331              <span class="font-semibold">12°</span>/<span class="text-white text-opacity-60">8°</span>
2332            </span>
2333          </div>
2334        
2335      </div>
2336    </div>
2337  </div>
2338</div>
2339
2340            </div>
2341        </div>
2342    </div>
2343
2344
2345</footer>
2346
2347
2348
2349
2350
2351    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 2351-2352
2351
2352    <script async src="https://www.googletagmanager.com/gtag/js?id=
2352G-THYLDY054V
vendor: 16 bytes, lines 2352-2353
2352"></script>
2353    
2353<script>
2354    
vendor: 139 bytes, lines 2354-2357
2354window.dataLayer = window.dataLayer || [];
2355    function gtag(){dataLayer.push(arguments);}
2356    gtag('js', new Date());
2357    gtag('config', '
2357G-THYLDY054V
vendor: 8 bytes, lines 2357-2358
2357');
2358    
2358</script>
2358
2359    <!-- ADD-ONS JS FILES -->
2360
2361    
2361<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
2361
2362    
2362<script src="https://microfrontends.sanjosedemaipo.cl/licencias/licencias-microfrontend.umd.js"></script>
2362
2363    
2363<script src="https://microfrontends.sanjosedemaipo.cl/oirs/oirs-microfrontend.umd.js"></script>
2363
2364    
2364<script src="https://microfrontends.sanjosedemaipo.cl/registro-vecinos/registro-vecinos-microfrontend.umd.js"></script>
2364
2365    
2365<script src="https://microfrontends.sanjosedemaipo.cl/consulta-aseo/consulta-aseo-microfrontend.umd.js"></script>
2365
2366    
2366<script src="https://microfrontends.sanjosedemaipo.cl/youtube-live-widget/youtube-live.umd.js"></script>
2366
2367    
2367<script src="https://microfrontends.sanjosedemaipo.cl/denuncias-anonimas/denuncias-anonimas-microfrontend.umd.js"></script>
2367
2368
2369    
2369<script src="https://cdn.sanjosedemaipo.cl/web2025/js/vendors/glightbox.min.js?v=1.0"></script>
2369
2370    
2370<script src="https://cdn.sanjosedemaipo.cl/web2025/js/scripts.js?v=7.8"></script>
2370
2371
2372    <!-- Contenedor para microfrontend de Denuncias Anónimas -->
2373    <div id="denuncias-container"></div>
2374    
2374<script>
2375        // Inicializar widget
2376        window.denunciasWidget = new DenunciasAnonimasMicrofrontend('denuncias-container', {
2377        apiUrl: 'https://api-microfronts.sanjosedemaipo.cl/denuncias',
2378        turnstileSiteKey: '0x4AAAAAABlENDBF49kBGtJt',
2379        displayMode: 'none' // No mostrar boton, solo el modal
2380        });
2381        window.denunciasWidget.mount();
2382
2383        // Agregar evento a todos los elementos con data-denuncias-trigger
2384        document.querySelectorAll('[data-denuncias-trigger]').forEach(function(el) {
2385        el.addEventListener('click', function(e) {
2386            e.preventDefault();
2387            window.denunciasWidget.open();
2388        });
2389        });
2390    </script>
2390
2391
2392    
2393    
2394
2395    </body>
2396</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.