| Server IP : 127.0.0.1 / Your IP : 216.73.216.109 Web Server : Apache/2.4.54 (Win64) OpenSSL/1.1.1q PHP/8.1.10 System : Windows NT DESKTOP-E5T4RUN 10.0 build 19045 (Windows 10) AMD64 User : SERVERWEB ( 0) PHP Version : 8.1.10 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/laragon/www/ |
Upload File : |
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>GAMQ</title>
<meta name="description" content="Gobierno Autonomo Municipal de Quillacollo">
<meta name="author" content="JTDI - fdms">
<link rel="shortcut icon" href="/assets/images/brand/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,400italic,700'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Patua+One:100,300,400,400italic,700'>
<link rel='stylesheet' href='/assets/css/global.css'>
<link rel='stylesheet' href='/assets/css/structure.css'>
<link rel='stylesheet' id='style-static' href='/assets/css/be_style.css'>
<link rel='stylesheet' href='/assets/css/custom.css'>
<link rel="stylesheet" href="/assets/plugins/rs-plugin/css/settings.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<link rel="stylesheet" href="/assets/css/home-typography.css?v=1.1">
<link rel="stylesheet" href="/assets/css/home-buttons.css?v=1.1">
<script src="/assets/js/lib/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
$(function(){
var tempFilter = 'en_uso';
$('#main-menu').load('layouts/menu.php');
$("#footer").load("layouts/footer.php");
$('#info').load('sections/section-info.html')
$('#tramites').load('sections/section-tramites.php');
$('#secretarias').load('sections/section-secretarias.php');
$('#sub-alcaldias').load('sections/section-sub-alcaldias.html');
$('#sub-alcaldias').load('sections/section-sub-alcaldias.html');
$('#apps').load('sections/section-apps.php', { tempFilter: 'en_uso' });
var urlParams = new URLSearchParams(window.location.search);
var page = urlParams.get('page') || 1;
var category = urlParams.get('category') || '';
loadNews(page, category);
$(document).on('click', '.pager a, .category-filters a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
var params = new URLSearchParams(url.split('?')[1]);
var page = params.get('page') || 1;
var category = params.get('category') || '';
loadNews(page, category);
history.pushState(null, null, url);
$('.category-filters a').removeClass('active');
if (category) {
$(`.category-filters a[href*="category=${category}"]`).addClass('active');
} else {
$('.category-filters a[href*="category="]').first().addClass('active');
}
});
});
function loadNews(page, category = '') {
$('#news-section').html('<div class="loading-spinner">Cargando noticias...</div>');
var data = { page: page };
if (category) {
data.category = category;
}
$("#news-section").load("sections/section-news.php", data, function() {
// $('html, body').animate({
// scrollTop: $("#news-section").offset().top - 100
// }, 500);
$('.pager a').removeClass('active');
$(`.pager a[href*="page=${page}"]`).addClass('active');
});
}
window.addEventListener('popstate', function() {
var urlParams = new URLSearchParams(window.location.search);
var page = urlParams.get('page') || 1;
var category = urlParams.get('category') || '';
loadNews(page, category);
});
$('<style>')
.prop('type', 'text/css')
.html(`
.flv_section {
padding-top: 30px;
padding-bottom: 20px;
}
.loading-spinner {
text-align: center;
padding: 40px;
color: #333;
}
.loading-spinner:before {
content: "";
display: inline-block;
width: 30px;
height: 30px;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #4299e1;
animation: spin 1s ease-in-out infinite;
margin-right: 10px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
`)
.appendTo('head');
</script>
</head>
<body class="page-parent template-slider layout-full-width header-transparent sticky-header sticky-white subheader-title-left">
<div id="Wrapper">
<div id="Header_wrapper">
<header id="Header">
<!-- <div id="main-menu"></div> -->
<div id="Top_bar">
<div class="container">
<div class="column one">
<div class="top_bar clearfix" style="background-color: rgba(255, 255, 255, 0.4);">
<div class="logo">
<a id="logo" href="/" title="GAMQ">
<img class="scale-with-grid" src="/assets/images/brand/logo1.png" title="GAMQ"/>
</a>
</div>
<div class="menu_wrapper">
<nav id="menu">
<ul id="menu-main-menu" class="menu">
<li class="current-menu-item">
<a href="#" target="_blank"><span>Inicio</span></a>
</li>
<li>
<a href="#tramites"><span>Tramites</span></a>
</li>
<li>
<a href="/pages/ptdi.html"><span>PTDI</span></a>
</li>
<li>
<a href="/modules/e-gamq/"><span>Gobierno Electrónico</span></a>
</li>
<li>
<a href="#"><span>Unidades</span></a>
<ul class="sub-menu mfn-megamenu mfn-megamenu-4">
<li class="mfn-megamenu-cols-4">
<ul class="sub-menu mfn-megamenu mfn-megamenu-4 ">
<li>
<a href="/modules/unidades/index-Agricola.html">
<span><i class="icon-leaf"></i>Agricola</span></a>
</li>
<li>
<a href="/modules/unidades/index-Cultura.html"><span><i class="icon-music-line"></i>Cultura </span></a>
</li>
<li>
<a href="/modules/unidades/index-Educacion.html"><span><i class="icon-graduation-cap"></i>Educación</span></a>
</li>
<li>
<a href="/modules/unidades/index-Turismo.html"><span><i class="icon-picture"></i>Turismo</span></a>
</li>
<!-- <li>
<a href="/modules/unidades/under-construction.html"><span><i class="icon-dribbble-circled"></i>Deportes</span></a>
</li> -->
</ul>
</li>
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="/modules/unidades/index-"><span> </span></a> -->
<ul class="sub-menu mfn-megamenu mfn-megamenu-4 ">
<li>
<a href="/modules/unidades/index-Zoonosis.html"><span><i class="icon-heart-empty-fa"></i>Zoonosis</span></a>
</li>
<li>
<a href="/modules/unidades/index-Pecuaria.html"><span><i class="icon-eventasaurus"></i>Pecuaria</span></a>
</li>
<li>
<a href="/modules/unidades/index-Riegos.html"><span><i class="icon-attention"></i>Riegos</span></a>
</li>
<li>
<a href="/modules/unidades/index-Red-Monica.html"><span><i class="icon-air"></i>Red Monica</span></a>
</li>
</ul>
</li>
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="/modules/unidades/index"><span>Content blocks</span></a> -->
<ul class="sub-menu mfn-megamenu mfn-megamenu-4 ">
<li>
<a href="/modules/unidades/index-Preservacion-ambiental.html"><span><i class="icon-beaker-line"></i>Preservación Ambiental</span></a>
</li>
<li>
<a href="/modules/unidades/index-Recursos-naturales.html"><span><i class="icon-lifebuoy"></i>Recursos Naturales</span></a>
</li>
<li>
<a href="/modules/unidades/index-Parques-jardines.html"><span><i class="icon-forrst"></i>Parques y Jardines</span></a>
</li>
<li>
<a href="/modules/unidades/index-Forestal.html"><span><i class="icon-forrst"></i>Forestal</span></a>
</li>
</ul>
</li>
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="content-elements.html"><span>Content elements</span></a> -->
<ul class="sub-menu mfn-megamenu mfn-megamenu-4 flv_menu_bg">
<li>
<a href="/modules/unidades/index-TDI.html"><span><i class="icon-monitor"></i>TDI - Sistemas</span></a>
</li>
<!-- <li>
<a href="/modules/unidades/index-MYPES.html"><span><i class="icon-money-line"></i>MYPES</span></a>
</li> -->
<li>
<a href="/modules/unidades/index-UGR.html"><span><i class="icon-traffic-cone"></i>UGR</span></a>
</li>
<li>
<a href="/modules/unidades/index-DIO.html"><span><i class="icon-users"></i>DIO</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="/pages/news.html"><span>Noticias</span></a>
<ul class="sub-menu">
<li>
<a href="https://prensa.quillacollo.gob.bo/transparencia/"><span>Transparencia</span></a>
<ul class="sub-menu">
<li>
<a href="https://prensa.quillacollo.gob.bo/category/unidad-de-transparencia/"><span>Unidad de Transparencia</span></a>
</li>
<li>
<a href="https://prensa.quillacollo.gob.bo/category/unidad-de-transparencia/auditoria/"><span>Informes Auditoria</span></a>
</li>
<li>
<a href="https://prensa.quillacollo.gob.bo/category/gacetamunicipal/"><span>Gaceta Municipal</span></a>
</li>
<li >
<a href="https://prensa.quillacollo.gob.bo/category/gacetamunicipal/leyesmunicipales/"><span>Leyes Municipales</span></a>
</li>
</ul>
</li>
<li>
<a href="https://prensa.quillacollo.gob.bo/category/secretarias/"><span>Secretarias</span></a>
<ul class="sub-menu">
<li>
<a href="https://prensa.quillacollo.gob.bo/category/secretarias/despacho/"><span>Despacho</span></a>
</li>
<li >
<a href="https://prensa.quillacollo.gob.bo/category/secretarias/desarrollohumano/"><span>Secretaria de desarrollo Humano</span></a>
</li>
<li>
<a href="https://prensa.quillacollo.gob.bo/category/secretarias/desarrollohumano/seguridad/"><span>Seguridad</span></a>
</li>
<li>
<a href="https://prensa.quillacollo.gob.bo/category/secretarias/productivo/"><span>Secretaria de Desarrollo Productivo</span></a>
</li>
</ul>
</li>
<li>
<a href="https://prensa.quillacollo.gob.bo/category/regularizacion23/"><span>Regularizacion Técnica</span></a>
</li>
<li>
<a href="/pages/ptdi.html"><span>PTDI</span></a>
</li>
</ul>
</li>
<li>
<a target="about" href="/pages/about.html">
<span><em class="themecolor">
<i class="icon-info"></i>Acerca de</em>
</span>
</a>
</li>
</ul>
</nav>
<a class="responsive-menu-toggle" href="#">
<i class="icon-menu"></i>
</a>
</div>
<!-- Secondary menu area - only for certain pages -->
<div class="secondary_menu_wrapper">
<nav id="secondary-menu" class="menu-secondary-menu-container">
<ul id="menu-secondary-menu" class="secondary-menu">
<li>
<a href="/">Inicio</a>
</li>
<li>
<a href="/pages/contact.html">Contactos</a>
</li>
<li>
<a href="/pages/news.html">Noticias</a>
</li>
<li>
<a href="shop.html">Unidades</a>
<ul class="sub-menu mfn-megamenu mfn-megamenu-4">
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="/modules/unidades/index-"><span></span></a> -->
<ul class="sub-menu">
<li>
<a href="/modules/unidades/index-agricola.html"><span>Agricola</span></a>
</li>
<li>
<a href="/modules/unidades/index-cultura.html"><span>Cultura </span></a>
</li>
<li>
<a href="/modules/unidades/index-educacion.html"><span>Educación</span></a>
</li>
<li>
<a href="/modules/unidades/index-turismo.html"><span>Turismo</span></a>
</li>
<!-- <li>
<a href="/modules/unidades/under-construction.html"><span>Deportes</span></a>
</li> -->
</ul>
</li>
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="/modules/unidades/index-"><span> </span></a> -->
<ul class="sub-menu">
<li>
<a href="/modules/unidades/index-zoonosis.html"><span>Zoonosis</span></a>
</li>
<li>
<a href="/modules/unidades/index-pecuaria.html"><span>Pecuaria</span></a>
</li>
<li>
<a href="/modules/unidades/index-riegos.html"><span>Riegos</span></a>
</li>
<li>
<a href="/modules/unidades/under-construction.html"><span>Red Monica</span></a>
</li>
</ul>
</li>
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="/modules/unidades/index"><span>Content blocks</span></a> -->
<ul class="sub-menu ">
<li>
<a href="/modules/unidades/index-preservacion-ambiental.html"><span>Preservación Ambiental</span></a>
</li>
<li>
<a href="/modules/unidades/index-recursos-naturales.html"><span>Recursos Naturales</span></a>
</li>
<li>
<a href="/modules/unidades/index-parques-jardines.html"><span>Parques y Jardines</span></a>
</li>
<li>
<a href="/modules/unidades/index-forestal.html"><span>Forestal</span></a>
</li>
</ul>
</li>
<li class="mfn-megamenu-cols-4">
<!-- <a class="mfn-megamenu-title" href="content-elements.html"><span>Content elements</span></a> -->
<ul class="sub-menu">
<li>
<a href="/modules/unidades/index-TDI.html"><span>TDI - Sistemas</span></a>
</li>
<li>
<a href="/modules/unidades/under-construction.html"><span>MYPES</span></a>
</li>
<li>
<a href="/modules/unidades/under-construction.html"><span>UGR</span></a>
</li>
<li>
<a href="/modules/unidades/under-construction.html"><span>DIO</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Banner area - only for certain pages-->
<div class="banner_wrapper">
<a href="#" target="_blank"><img src="/assets/images/ads/468x60.gif"></a>
</div>
</div>
</div>
</div>
</div>
<div class="mfn-main-slider" id="mfn-rev-slider">
<div id="rev_slider_34_2_wrapper" class="rev_slider_wrapper fullwidthbanner-container flv_rev_14">
<div id="rev_slider_34_2" class="rev_slider fullwidthabanner flv_rev_13">
<ul>
<li data-transition="fade" data-slotamount="7" data-masterspeed="300" data-thumb="/assets/images/home/hero/home-quillacollo.png" data-saveperformance="off">
<img src="/assets/images/home/hero/home-quillacollo1.png" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<div style="position:absolute;inset:0;z-index:1;pointer-events:none;">
<div class="tp-caption customin flv_rev_14 home-wordmark" data-x="center" data-responsive_offset="on"
data-y="center" data-hoffset="-20" data-voffset="20" data-speed="1000" data-start="500"
data-easing="easeOutBack" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-Q.png" >
</div>
<div class="tp-caption sfr tp-fade flv_rev_15" data-x="center" data-responsive_offset="on"
data-y="center" data-hoffset="245" data-voffset="105" data-speed="1000" data-start="1300"
data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-u.png">
</div>
<div class="tp-caption sfr tp-fade flv_rev_16" data-x="center" data-responsive_offset="on"
data-y="center" data-hoffset="360" data-voffset="75" data-speed="1000" data-start="1800"
data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-i.png">
</div>
<div class="tp-caption sfr tp-fade flv_rev_9" data-x="center" data-responsive_offset="on"
data-y="center" data-hoffset="520" data-voffset="50" data-speed="800" data-start="2100"
data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-l.png">
</div>
<div class="tp-caption sfr tp-fade flv_rev_8" data-x="center" data-responsive_offset="on"
data-y="center" data-hoffset="660" data-voffset="50" data-speed="800" data-start="2400"
data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-ll.png">
</div>
<div class="tp-caption sfr tp-fade flv_rev_7" data-x="center"
data-y="center" data-hoffset="660" data-voffset="105" data-speed="800" data-start="2700"
data-easing="Power3.easeInOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-a.png">
</div>
<div class="tp-caption mfnrs_home_small sfr tp-resizeme flv_rev_4" data-x="center" data-hoffset="-520" data-y="center" data-voffset="-80" data-speed="500" data-start="3600"
data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-transparente.png">
</div>
<div class="tp-caption mfnrs_home sft tp-resizeme flv_rev_18" data-x="center" data-hoffset="-530" data-y="center" data-voffset="-110" data-speed="500" data-start="3000"
data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<span class='themecolor'>GOBIERNO</span>
<br></span> ELECTRONICO
</div>
<div class="tp-caption mfnrs_home_small sfl tp-resizeme flv_rev_17" data-x="center" data-hoffset="-540" data-y="center" data-voffset="-20" data-speed="500" data-start="3300"
data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
Gobierno autonomo municipal
<br> de Quillacollo
</div>
<div class="tp-caption rev-btn " id="slide-1-layer-2" data-x="center" data-hoffset="-610" data-y="center" data-voffset="160" data-speed="500" data-start="4000"
data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" data-width="['auto']" data-height="['auto']" data-type="button" data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":"100","speed":"600","ease":"Linear.easeNone"}]'
data-responsive_offset="on" data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0,0,0,1);bg:rgba(255,255,255,1);bs:solid;bw:0 0 0 0;"}]'
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[12,12,12,12]" data-paddingright="[35,35,35,35]" data-paddingbottom="[12,12,12,12]" data-paddingleft="[35,35,35,35]" style=" border-radius: 7%; z-index: 6; white-space: nowrap; font-size: 17px; line-height: 17px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: px;font-family:PT Sans;background-color:rgb(6, 160, 226);border-color:rgba(0,0,0,1);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer">
Conoce más
</div>
</div>
</li>
<li data-transition="fade" data-slotamount="7" data-masterspeed="300" data-thumb="/assets/images/home/hero/home-quillacollo2.jpeg" data-saveperformance="off">
<img src="/assets/images/home/hero/home-quillacollo2.jpeg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2, 13, 21, 0.78) 0%,rgba(143, 159, 166, 0.22) 50%);z-index:1;pointer-events:none;">
<div class="tp-caption lft flv_rev_14" data-x="right" data-y="bottom" data-easing="Power3.easeInOut"
data-hoffset="-50" data-voffset="240" data-speed="500" data-start="1000"
data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-home-A-2-1.png">
</div>
<div class="tp-caption lft flv_rev_15" data-x="right" data-y="bottom" data-easing="Power3.easeInOut"
data-hoffset="-40" data-voffset="190" data-speed="500" data-start="1500"
data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-home-A-2-2.png">
</div>
<div class="tp-caption lft flv_rev_16" data-x="right" data-y="bottom" data-easing="Power3.easeInOut"
data-hoffset="-30" data-voffset="140" data-speed="500" data-start="2000"
data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-home-A-2-3.png">
</div>
<div class="tp-caption lft flv_rev_9" data-x="right" data-y="bottom" data-easing="Power3.easeInOut"
data-hoffset="-20" data-voffset="90" data-speed="500" data-start="2500"
data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-home-A-2-4.png">
</div>
<div class="tp-caption lft flv_rev_8" data-x="right" data-y="bottom" data-easing="Power3.easeInOut"
data-hoffset="-10" data-voffset="40" data-speed="500" data-start="3000"
data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-home-A-2-5.png">
</div>
<div class="tp-caption mfnrs_home_small sfr tp-resizeme flv_rev_4" data-x="center" data-hoffset="-380" data-y="center" data-voffset="-80" data-speed="500" data-start="3600" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-transparente-1.png">
</div>
<div class="tp-caption mfnrs_home sft tp-resizeme flv_rev_19" data-x="center" data-hoffset="-380" data-y="center" data-voffset="-110" data-speed="500" data-start="3000" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<span class='themecolor'>Gobierno Autónomo </span>
<br> Municipal de QUILLACOLLO
</div>
<div class="tp-caption mfnrs_home_small sfl tp-resizeme flv_rev_17" data-x="center" data-hoffset="-540" data-y="center" data-voffset="-20" data-speed="500" data-start="3300" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
Gobierno autonomo municipal
<br> de Quillacollo
</div>
<div class="tp-caption rev-btn " id="slide-1-layer-2" data-x="center" data-hoffset="-610" data-y="center" data-voffset="160" data-speed="500" data-start="4000" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" data-width="['auto']" data-height="['auto']" data-type="button" data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":"100","speed":"600","ease":"Linear.easeNone"}]'
data-responsive_offset="on" data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0,0,0,1);bg:rgba(255,255,255,1);bs:solid;bw:0 0 0 0;"}]'
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[12,12,12,12]" data-paddingright="[35,35,35,35]" data-paddingbottom="[12,12,12,12]" data-paddingleft="[35,35,35,35]" style=" border-radius: 7%; z-index: 6; white-space: nowrap; font-size: 17px; line-height: 17px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: px;font-family:PT Sans;background-color:rgb(6, 160, 226);border-color:rgba(0,0,0,1);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer">
Conoce más
</div>
</div>
</li>
<li data-transition="fade" data-slotamount="7" data-masterspeed="300" data-thumb="/assets/images/home/hero/home-quillacollo3.png" data-saveperformance="off">
<img src="/assets/images/home/hero/home-quillacollo3.png" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat" title="portada">
<div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2, 13, 21, 0.78) 0%,rgba(143, 159, 166, 0.22) 50%);z-index:1;pointer-events:none;">
<div class="tp-caption customin flv_rev_14" data-x="center" data-hoffset="600" data-y="center" data-voffset="550" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:1;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="500" data-easing="easeOutBack" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
<div class="text">120 AÑOS</div>
</div>
<div class="tp-caption mfnrs_home_small sfr tp-resizeme flv_rev_4" data-x="center" data-hoffset="-380" data-y="center" data-voffset="-80" data-speed="500" data-start="3600" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<img src="/assets/images/home/hero/slide-transparente-1.png">
</div>
<div class="tp-caption mfnrs_home sft tp-resizeme flv_rev_19" data-x="center" data-hoffset="-380" data-y="center" data-voffset="-110" data-speed="500" data-start="3000" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
<span class='themecolor'>Gobierno Autónomo </span>
<br> Municipal de QUILLACOLLO
</div>
<div class="tp-caption mfnrs_home_small sfl tp-resizeme flv_rev_17" data-x="center" data-hoffset="-540" data-y="center" data-voffset="-20" data-speed="500" data-start="3300" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300">
Gobierno autonomo municipal
<br> de Quillacollo
</div>
<div class="tp-caption rev-btn " id="slide-1-layer-2" data-x="center" data-hoffset="-610" data-y="center" data-voffset="160" data-speed="500" data-start="4000" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" data-width="['auto']" data-height="['auto']" data-type="button" data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":"100","speed":"600","ease":"Linear.easeNone"}]'
data-responsive_offset="on" data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0,0,0,1);bg:rgba(255,255,255,1);bs:solid;bw:0 0 0 0;"}]'
data-textAlign="['inherit','inherit','inherit','inherit']" data-paddingtop="[12,12,12,12]" data-paddingright="[35,35,35,35]" data-paddingbottom="[12,12,12,12]" data-paddingleft="[35,35,35,35]" style=" border-radius: 7%; z-index: 6; white-space: nowrap; font-size: 17px; line-height: 17px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: px;font-family:PT Sans;background-color:rgb(6, 160, 226);border-color:rgba(0,0,0,1);outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer">
Conoce más
</div>
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom flv_vis_hid"></div>
</div>
</div>
</div>
</header>
</div>
<div id="Content">
<div class="content_wrapper clearfix">
<div class="sections_group">
<div class="entry-content">
<!-- SECCIÓN ALCALDE MUNICIPAL -->
<div class="desktop-section">
<div class="section flv_sections_1 alcalde-section-desktop">
<div class="section_wrapper clearfix">
<div class="items_group clearfix alcalde-layout">
<div class="column alcalde-foto-col">
<div class="alcalde-foto-wrapper animate" data-anim-type="fadeInLeftLarge">
<div class="alcalde-foto-frame">
<img
src="/assets/images/people/mayor/Abg. Luis Santa Cruz Torrico.png"
alt="Alcalde Municipal - Gobierno Autónomo Municipal de Quillacollo"
class="alcalde-foto-img"
/>
<div class="alcalde-foto-badge">
<span class="badge-cargo">Alcalde Municipal</span>
<span class="badge-nombre">GAMQ · Quillacollo</span>
</div>
</div>
</div>
</div>
<div class="column alcalde-texto-col">
<div class="animate" data-anim-type="fadeInRightLarge">
<div class="alcalde-encabezado">
<div class="alcalde-linea-azul"></div>
<div>
<p class="alcalde-subtitulo">GOBIERNO MUNICIPAL</p>
<h2 class="alcalde-titulo">ALCALDE MUNICIPAL</h2>
<p class="alcalde-nombre">Abg. LUIS SANTA CRUZ TORRICO</p>
</div>
</div>
<div class="alcalde-quote-block">
<div class="alcalde-saludo">
<span class="q-open" aria-hidden="true">“</span>
<p class="saludo-texto">Querido pueblo de Quillacollo:</p>
</div>
<div class="alcalde-mensaje">
<p>Hoy iniciamos juntos una nueva etapa de esperanza, unidad y progreso para nuestro municipio. Asumo esta gran responsabilidad con profundo compromiso, humildad y la firme convicción de trabajar al lado de cada vecino, cada familia y cada comunidad.</p>
<p>Mi compromiso es escuchar a nuestra gente, fortalecer nuestra identidad y encaminar a Quillacollo hacia un futuro con más oportunidades, desarrollo y bienestar para todos.</p>
<p>Esta gestión será de puertas abiertas, basada en el trabajo conjunto, la transparencia y la vocación de servicio, porque solo unidos podremos construir el municipio digno y próspero que todos soñamos.</p>
<p>Convoco a todo el pueblo quillacolleño a caminar juntos en este nuevo tiempo, dejando de lado las diferencias y poniendo por delante el amor por nuestra tierra y el futuro de nuestras nuevas generaciones.</p>
<p>Hoy comienza una nueva historia para Quillacollo, y la construiremos entre todos.<span class="q-close" aria-hidden="true">”</span></p>
</div>
</div>
<div class="alcalde-firma">
<span class="firma-viva">¡Que viva Quillacollo!</span>
<div class="firma-linea"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-section">
<div class="section alcalde-section-mobile">
<div class="section_wrapper">
<div class="mobile-alcalde-header">
<div class="mobile-alcalde-foto-wrap">
<img
src="/assets/images/people/mayor/Abg. Luis Santa Cruz Torrico.png"
alt="Alcalde Municipal"
class="mobile-alcalde-foto"
/>
</div>
<div class="mobile-alcalde-ident">
<span class="mobile-cargo-tag">Alcalde Municipal</span>
<h2 class="mobile-alcalde-nombre">Abg. Luis Santa Cruz Torrico</h2>
<span class="mobile-alcalde-inst">Gobierno Autónomo Municipal de Quillacollo</span>
</div>
</div>
<div class="mobile-alcalde-mensaje-card">
<p class="mobile-saludo"><span class="mob-q-open" aria-hidden="true">“</span> Querido pueblo de Quillacollo:</p>
<p>Hoy iniciamos juntos una nueva etapa de esperanza, unidad y progreso para nuestro municipio. Asumo esta gran responsabilidad con profundo compromiso, humildad y la firme convicción de trabajar al lado de cada vecino, cada familia y cada comunidad.</p>
<p>Mi compromiso es escuchar a nuestra gente, fortalecer nuestra identidad y encaminar a Quillacollo hacia un futuro con más oportunidades, desarrollo y bienestar para todos.</p>
<p>Esta gestión será de puertas abiertas, basada en el trabajo conjunto, la transparencia y la vocación de servicio, porque solo unidos podremos construir el municipio digno y próspero que todos soñamos.</p>
<p>Convoco a todo el pueblo quillacolleño a caminar juntos en este nuevo tiempo, dejando de lado las diferencias y poniendo por delante el amor por nuestra tierra y el futuro de nuestras nuevas generaciones.</p>
<p>Hoy comienza una nueva historia para Quillacollo, y la construiremos entre todos.<span class="mob-q-close" aria-hidden="true">”</span></p>
</div>
<div class="alcalde-firma">
<span class="firma-viva">¡Que viva Quillacollo!</span>
<div class="firma-linea"></div>
</div>
</div>
</div>
</div>
<!-- INTRO -->
<div class="desktop-section">
<div class="section flv_sections_6" id="start">
<div class="section_wrapper clearfix">
<div class="items_group clearfix">
<div class="column one-third column_icon_box">
<div class="animate" data-anim-type="fadeInLeftLarge">
<div class="icon_box icon_position_top has_border">
<div class="icon_wrapper">
<div class="icon">
<i class="icon-lightbulb-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4>MISIÓN</h4>
<div class="desc">
El Gobierno Autónomo Municipal de Quillacollo es una unidad territorial política y administrativa, organizada y autónoma, que contribuye al desarrollo endógeno y a la satisfacción de las necesidades colectivas, garantizando la participación de todos/as habitantes en el proceso de planificación para el desarrollo productivo agroindustrial tecnológico, integral y sostenible, que promueva el vivir bien.
</div>
</div>
</div>
</div>
</div>
<div class="column one-third column_icon_box">
<div class="animate" data-anim-type="zoomIn">
<div class="icon_box icon_position_top has_border">
<div class="icon_wrapper">
<div class="icon">
<i class="icon-star-empty"></i>
</div>
</div>
<div class="desc_wrapper">
<h4>VISIÓN</h4>
<div class="desc">
Se traduce en el desarrollo e industrialización agropecuaria, con integración vial y telecomunicativa, respetando la biodiversidad, normas y procedimientos propios, promoviendo además la calidad de educación, salud y turismo, equitativo en todos sus grupos generacionales.
</div>
</div>
</div>
</div>
</div>
<div class="column one-third column_icon_box">
<div class="animate" data-anim-type="fadeInRightLarge">
<div class="icon_box icon_position_top no_border">
<div class="icon_wrapper">
<div class="icon">
<i class="icon-info"></i>
</div>
</div>
<div class="desc_wrapper">
<h4>NUESTRA GESTIÓN</h4>
<div class="desc">
La atención a nuestros ciudadanos será prioridad, llegaremos hasta las juntas vecinales de los 10 distritos a inspeccionar para detectar sus necesidades. El trabajo coordinado y consensuado, nos permitirá la búsqueda de soluciones viables velando los intereses de la institucionalidad y la ciudadanía.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-section">
<div class="section">
<div class="section_wrapper">
<div class="mobile-mission-cards">
<div class="mobile-card">
<div class="mobile-icon">💡</div>
<div class="mobile-content">
<h4>MISIÓN</h4>
<div class="desc">
El Gobierno Autónomo Municipal de Quillacollo contribuye al desarrollo endógeno y satisfacción de necesidades colectivas, garantizando la participación ciudadana para el desarrollo productivo integral y sostenible.
</div>
</div>
</div>
<div class="mobile-card">
<div class="mobile-icon">⭐</div>
<div class="mobile-content">
<h4>VISIÓN</h4>
<div class="desc">
Desarrollo e industrialización agropecuaria con integración vial y telecomunicativa, respetando la biodiversidad y promoviendo educación, salud y turismo equitativo.
</div>
</div>
</div>
<div class="mobile-card">
<div class="mobile-icon">🏛️</div>
<div class="mobile-content">
<h4>NUESTRA GESTIÓN</h4>
<div class="desc">
Priorizamos la atención ciudadana, llegando a las juntas vecinales de los 10 distritos para detectar necesidades y buscar soluciones viables.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELEVANT INFO -->
<div class="section dark flv_sections_2 important-info-section">
<div class="section_wrapper clearfix important-info-wrapper">
<div class="column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<h2 class="title">INFORMACIÓN IMPORTANTE</h2>
<div class="inside">
<span class="big">Avisos, mapas y comunicados destacados para la ciudadanía.</span>
</div>
</div>
</div>
</div>
<div class="testimonials_slider important-info-slider">
<ul class="testimonials_slider_ul">
<li>
<div class="important-slide">
<div class="animate" data-anim-type="zoomIn">
<div class="important-card featured-map">
<div class="map-wrapper full-width-map">
<h3 class="map-title">DISTRITOS DEL GAMQ</h3>
<div class="responsive-iframe-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1vWEG0ZlVnz4m7kdvrRs8tEIZv1rJP7A&ehbc=2E312F&z=10"
width="100%" height="500"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="important-slide">
<div class="animate" data-anim-type="zoomIn">
<div class="important-grid">
<div class="important-card map-wrapper">
<h3 class="map-title">Mapa Recorrido Entrada Urcupiña</h3>
<div class="responsive-iframe-container">
<iframe src="https://www.google.com/maps/d/embed?mid=12T0Qx7AEeiqsLfoVRBLsWPHMxLsdymA&ehbc=2E312F"
width="100%" height="400"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</div>
<div class="important-card map-wrapper">
<h3 class="map-title">Mapa Zonas Comerciales</h3>
<div class="responsive-iframe-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1esxdf9fKPfl2-VhyFDTOQ1-JawDJl-c&ehbc=2E312F"
width="100%" height="400"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="important-slide">
<div class="animate" data-anim-type="zoomIn">
<div class="important-grid important-media-grid">
<div class="important-card facebook-post-wrapper">
<h3 class="map-title">Comunicado Municipal</h3>
<div class="responsive-iframe-container">
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3Dpfbid02dfwAQwaG5R88acwBQzukur1P5zMHL72Mh2StoCEPmL6auNvBds1LgWdnSrD5tYL5l%26id%3D100069003586474&show_text=false&width=500" width="500" height="497" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</div>
<div class="important-card facebook-post-wrapper">
<h3 class="map-title">Video Destacado</h3>
<div class="responsive-iframe-container">
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2F100069003586474%2Fvideos%2F779764224538537%2F&show_text=false&width=560&t=0" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</div>
</div>
</div>
</div>
</div>
</li>
<!--
Add more important information slides by copying this item:
<li>
<div class="important-slide">
<div class="important-grid">
<div class="important-card">
<h3 class="map-title">Titulo del aviso</h3>
<div class="responsive-iframe-container">
iframe, imagen o contenido destacado
</div>
</div>
</div>
</div>
</li>
-->
</ul>
</div>
</div>
<!-- SECTIONS -->
<div id="news-section"></div>
<div id="tramites"></div>
<!-- <div id="sub-alcaldias"></div> -->
<div id="secretarias"></div>
<div class="section dark flv_section" id="gobierno">
<div class="section_wrapper clearfix">
<div class="column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<div class="animate" data-anim-type="zoomInLeftLarge">
<h2 class="title" style="color:#ffff">GOBIERNO ELECTRÓNICO</h2>
<div class="inside">
<span class="big">Nuestras aplicaciones digitales para servirte mejor.</span>
</div>
</div>
</div>
</div>
<div class="column one column_blog">
<div id="apps"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
<div id="aviso-modal" class="aviso-modal" aria-hidden="true">
<div class="aviso-modal__backdrop" data-aviso-close></div>
<div class="aviso-modal__dialog" role="dialog" aria-modal="true" aria-label="Aviso importante">
<button class="aviso-modal__close" type="button" aria-label="Cerrar aviso" data-aviso-close>×</button>
<div class="aviso-modal__presenter" aria-hidden="true">
<img src="/assets/images/brand/avatars/chatbot-noticias.png" alt="">
</div>
<img id="aviso-modal-image" class="aviso-modal__image" src="" alt="Aviso importante del GAMQ">
</div>
</div>
<!-- JS -->
<script src="/assets/js/jquery-3.6.0.min.js"></script>
<script src="/assets/js/jquery-migrate-3.4.0.min.js"></script>
<script src="/assets/js/ui/jquery-ui.min.js"></script>
<script src="/assets/js/mfn.menu.js"></script>
<script src="/assets/js/jquery.plugins.js"></script>
<script src="/assets/js/jquery.jplayer.min.js"></script>
<script src="/assets/js/animations/animations.js"></script>
<script src="/assets/js/email.js"></script>
<script src="/assets/js/scripts.js"></script>
<script src="/assets/plugins/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.video.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.actions.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.migration.min.js"></script>
<script src="/assets/plugins/rs-plugin/js/extensions/revolution.extension.parallax.min.js"></script>
<script>
var tpj = jQuery;
tpj.noConflict();
var revapi34;
tpj(document).ready(function() {
if (tpj("#rev_slider_34_2").revolution == undefined) {
revslider_showDoubleJqueryError("#rev_slider_34_2");
} else {
revapi34 = tpj("#rev_slider_34_2").show().revolution({
sliderType:"standard",
sliderLayout:"auto",
dottedOverlay:"none",
delay: 7000,
navigation: {
keyboardNavigation:"off",
keyboard_direction:"horizontal",
mouseScrollNavigation:"off",
onHoverStop:"on",
touch: {
touchenabled:"on",
swipe_threshold: 0.7,
swipe_min_touches: 1,
swipe_direction:"horizontal",
drag_block_vertical: false
},
arrows: {
style:"uranus",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align:"right",
v_align:"bottom",
h_offset: 90,
v_offset: 40
},
right: {
h_align:"right",
v_align:"bottom",
h_offset: 40,
v_offset: 40
}
},
thumbnails: {
style:"hesperiden",
enable: true,
width: 200,
height: 80,
min_width: 100,
wrapper_padding: 5,
wrapper_color:"transparent",
wrapper_opacity:"1",
tmp: '<span class="tp-thumb-image"></span><span class="tp-thumb-title">Slide</span>',
visibleAmount: 3,
hide_onmobile: true,
hide_under: 0,
hide_onleave: false,
direction:"horizontal",
span: false,
position:"inner",
space: 5,
h_align:"left",
v_align:"bottom",
h_offset: 40,
v_offset: 40
}
},
gridwidth: 1180,
gridheight: 750,
lazyType:"none",
shadow: 0,
spinner:"spinner3",
stopLoop:"off",
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle:"off",
autoHeight:"off",
disableProgressBar:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
startWithSlide: 0,
debugMode: false,
fallbacks: {
simplifyAll:"on",
nextSlideOnWindowFocus:"off",
disableFocusListener:"off",
}
});
}
});
</script>
<script>
jQuery(window).on('load', function () {
jQuery(".jq-tabs").tabs();
var retina = window.devicePixelRatio> 1 ? true : false;
if (retina) {
var retinaEl = jQuery("#logo img");
var retinaLogoW = retinaEl.width();
var retinaLogoH = retinaEl.height();
retinaEl.attr("src","/assets/images/brand/logo1.png").width(retinaLogoW).height(retinaLogoH)
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const modal = document.getElementById('aviso-modal');
const image = document.getElementById('aviso-modal-image');
if (!modal || !image) {
return;
}
const closeAviso = function () {
modal.classList.remove('is-visible');
modal.setAttribute('aria-hidden', 'true');
image.removeAttribute('src');
};
fetch('app/aviso-activo.php', { cache: 'no-store' })
.then(function (response) {
if (!response.ok) {
throw new Error('No se pudo consultar el aviso.');
}
return response.json();
})
.then(function (data) {
if (!data.active || !data.aviso || !data.aviso.url) {
return;
}
image.src = data.aviso.url;
modal.classList.add('is-visible');
modal.setAttribute('aria-hidden', 'false');
})
.catch(function () {
closeAviso();
});
modal.querySelectorAll('[data-aviso-close]').forEach(function (button) {
button.addEventListener('click', closeAviso);
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape' && modal.classList.contains('is-visible')) {
closeAviso();
}
});
});
</script>
<style>
.aviso-modal {
position: fixed;
inset: 0;
z-index: 20000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.aviso-modal.is-visible {
display: flex;
}
.aviso-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.aviso-modal__dialog {
position: relative;
width: min(720px, calc(100vw - 40px));
max-height: calc(100vh - 48px);
border-radius: 10px;
background: #ffffff;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
overflow: visible;
animation: avisoFadeIn 0.25s ease;
}
.aviso-modal__image {
display: block;
width: 100%;
max-height: calc(100vh - 48px);
object-fit: contain;
background: #ffffff;
border-radius: 10px;
}
.aviso-modal__presenter {
position: absolute;
left: -86px;
bottom: -18px;
width: 190px;
height: 150px;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(135deg, #eaf7ff 0%, #f8fbff 100%);
border: 3px solid #ffffff;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.28);
z-index: 2;
pointer-events: none;
}
.aviso-modal__presenter img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 38%;
display: block;
}
.aviso-modal__close {
position: absolute;
top: 10px;
right: 10px;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(15, 23, 42, 0.82);
color: #ffffff;
font-size: 26px;
line-height: 1;
cursor: pointer;
z-index: 1;
transition: transform 0.2s ease, background 0.2s ease;
}
.aviso-modal__close:hover {
background: #0f172a;
transform: scale(1.05);
}
@keyframes avisoFadeIn {
from {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 640px) {
.aviso-modal {
padding: 14px;
}
.aviso-modal__dialog {
width: calc(100vw - 28px);
max-height: calc(100vh - 28px);
}
.aviso-modal__image {
max-height: calc(100vh - 28px);
}
.aviso-modal__presenter {
left: 10px;
bottom: 10px;
width: 118px;
height: 92px;
border-radius: 14px;
border-width: 2px;
}
}
.column, .columns {
margin: 0 1% 0px;
}
a.button, a.tp-button, button, input[type="submit"], input[type="reset"], input[type="button"] {
margin-bottom: 15px;
}
.desktop-section {
display: block;
}
.mobile-section {
display: none;
}
/* Desktop Items Group */
.items_group {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
/* Desktop Icon Boxes */
.column.one-third.column_icon_box {
flex: 1;
min-width: 300px;
max-width: 380px;
}
/* Desktop Alcalde Section */
.desktop-section .column_list {
width: 48%;
float: left;
margin-right: 4%;
}
.desktop-section .column_list:last-child {
margin-right: 0;
}
.blockquote {
background: #f8f9fa;
border-left: 4px solid #06a0e2;
border-radius: 6px;
padding: 25px;
margin: 0px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.blockquote blockquote {
font-style: italic;
font-size: 16px;
line-height: 1.7;
color: #555;
margin: 0;
}
@media (max-width: 767px) {
.section {
padding: 5px 15px;
}
.column, .columns {
margin: 0 1% 0px;
}
.desktop-section {
display: none !important;
}
.mobile-section {
display: block !important;
}
.section {
padding: 25px 15px;
}
/* Mobile Mission/Vision/Management Cards */
.mobile-mission-cards {
display: flex;
flex-direction: column;
gap: 15px;
}
.mobile-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
display: flex;
align-items: flex-start;
gap: 15px;
transition: all 0.3s ease;
}
.mobile-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* Mobile Icons - Using Emojis for Better Display */
.mobile-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #06a0e2, #4299e1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(6, 160, 226, 0.3);
}
.mobile-content h4 {
font-size: 18px;
font-weight: 600;
color: #2d3748;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mobile-content .desc {
font-size: 14px;
line-height: 1.5;
color: #555;
text-align: left;
}
/* Mobile Alcalde Section */
.mobile-alcalde {
background: white;
border-radius: 12px;
padding: 18px;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.fancy_heading .title {
font-size: 24px;
font-weight: 700;
color: #2d3748;
margin-bottom: 0px;
text-align: center;
}
.mobile-quote {
display: grid;
gap: 10px;
position: relative;
}
.mobile-quote::before {
display: none;
}
.mobile-quote blockquote {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border-left: 4px solid #06a0e2;
border-radius: 9px;
font-style: italic;
font-size: 14px;
line-height: 1.5;
color: #394150;
margin: 0;
padding: 14px 14px 14px 16px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.column.one-third.column_icon_box {
min-width: 280px;
}
.icon_wrapper .icon {
width: 60px;
height: 60px;
}
.icon_wrapper .icon i {
font-size: 28px !important;
}
}
.animate {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
.animate:nth-child(1) { animation-delay: 0.1s; }
.animate:nth-child(2) { animation-delay: 0.2s; }
.animate:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.mobile-card {
opacity: 0;
transform: translateX(-20px);
animation: slideInLeft 0.5s ease forwards;
}
.mobile-card:nth-child(1) { animation-delay: 0.1s; }
.mobile-card:nth-child(2) { animation-delay: 0.2s; }
.mobile-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
.important-info-section {
padding: 34px 0 44px;
background-image: url(/assets/images/home/hero/section_urku.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.important-info-section .important-info-wrapper,
.important-info-section .important-slide {
width: min(100% - 40px, 1200px);
max-width: 1200px;
margin: 0 auto;
}
.important-info-section .column {
margin-bottom: 0;
}
.important-info-section .fancy_heading {
margin-bottom: 18px;
text-align: center;
}
.important-info-section .fancy_heading .title {
color: #fff;
font-size: 28px;
line-height: 1.2;
margin-bottom: 6px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}
.important-info-section .fancy_heading .inside {
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.important-info-slider {
max-width: 1320px;
margin: 0 auto;
}
.important-info-slider .testimonials_slider_ul li {
padding: 0;
}
.important-slide {
box-sizing: border-box;
padding: 0 42px 22px;
}
.important-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.important-card {
min-width: 0;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.important-card.featured-map {
width: 100%;
}
.important-info-section .map-wrapper {
width: 100%;
max-width: none;
min-width: 0;
box-shadow: none;
}
.important-info-section .full-width-map {
width: 100% !important;
max-width: none !important;
margin: 0;
}
.important-info-section .responsive-iframe-container {
padding-top: 56.25%;
background: #0f172a;
}
.important-info-section .featured-map .responsive-iframe-container {
padding-top: 42%;
min-height: 420px;
}
.important-info-section .important-media-grid .responsive-iframe-container {
min-height: 340px;
}
.important-info-section .responsive-iframe-container iframe {
background: #0f172a;
}
.map-wrapper {
flex: 1;
min-width: 300px;
max-width: 600px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.full-width-map {
width: 80% !important;
max-width: 80% !important;
margin: 0 auto;
}
.full-width-map .responsive-iframe-container {
padding-top: 50%;
}
.full-width-map iframe {
height: 600px !important;
}
.map-title {
padding: 20px;
margin: 0;
background: linear-gradient(135deg, #06a0e2, #4299e1);
color: white;
font-size: 20px;
text-align: center;
font-weight: 600;
}
.responsive-iframe-container {
position: relative;
overflow: hidden;
padding-top: 65%;
}
.responsive-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.important-info-section .responsive-iframe-container iframe {
width: 100% !important;
height: 100% !important;
}
@media (max-width: 900px) {
.important-info-section .important-info-wrapper,
.important-info-section .important-slide {
width: min(100% - 28px, 680px);
}
.important-slide {
padding: 0 34px 18px;
}
.important-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.important-info-section .featured-map .responsive-iframe-container,
.important-info-section .important-media-grid .responsive-iframe-container {
min-height: 300px;
padding-top: 62%;
}
}
@media (max-width: 767px) {
.important-info-section {
padding: 26px 0 32px;
}
.important-info-section .fancy_heading .title {
font-size: 22px;
}
.important-slide {
width: 100%;
padding: 0 16px 16px;
}
.important-info-section .important-info-wrapper {
width: min(100% - 24px, 520px);
}
.important-info-section .featured-map .responsive-iframe-container,
.important-info-section .important-media-grid .responsive-iframe-container {
min-height: 240px;
}
.map-title {
padding: 14px 12px;
font-size: 16px;
}
}
</style>
<!-- ===== ESTILOS DE LA SECCIÓN ===== -->
<style>
.alcalde-section-desktop {
background: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%);
padding: 60px 0;
overflow: hidden;
}
.alcalde-section-desktop::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 340px; height: 340px;
border-radius: 50%;
background: rgba(6, 160, 226, 0.07);
pointer-events: none;
}
.alcalde-section-desktop::after {
content: '';
position: absolute;
bottom: -80px; left: -40px;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(6, 160, 226, 0.05);
pointer-events: none;
}
/* structure.css is float-based; flex needed for photo+text layout */
.alcalde-layout {
display: flex !important;
align-items: flex-start;
gap: 16px;
flex-wrap: nowrap !important;
}
.alcalde-foto-col {
flex: 0 0 580px;
width: 580px !important;
margin: 0 !important; /* overrides structure.css .column margin */
}
.alcalde-foto-wrapper {
position: relative;
}
.alcalde-foto-frame {
position: relative;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(6, 160, 226, 0.18), 0 8px 24px rgba(0,0,0,0.1);
border: 4px solid #fff;
}
.alcalde-foto-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 4/3;
}
.alcalde-foto-badge {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(6,56,100,0.92) 0%, rgba(6,56,100,0) 100%);
padding: 28px 20px 18px;
display: flex;
flex-direction: column;
gap: 2px;
}
.badge-cargo {
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
}
.badge-nombre {
font-size: 14px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.5px;
}
.alcalde-texto-col {
flex: 1;
min-width: 0;
margin: 0 !important;
}
.alcalde-encabezado {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 20px;
}
.alcalde-linea-azul {
width: 4px;
min-height: 72px;
background: linear-gradient(to bottom, #06a0e2, #4299e1);
border-radius: 0; /* single-sided accent — no rounded corners */
flex-shrink: 0;
margin-top: 3px;
}
.alcalde-subtitulo {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: #06a0e2;
font-weight: 700;
margin: 0 0 4px;
}
.alcalde-titulo {
font-size: 26px;
font-weight: 800;
color: #1a202c;
margin: 0 0 4px;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.alcalde-nombre {
font-size: 15px;
color: #4a5568;
margin: 0;
font-style: italic;
}
.alcalde-quote-block {
border-left: 3px solid rgba(6, 160, 226, 0.3);
border-radius: 0;
padding-left: 14px;
margin-bottom: 20px;
}
.alcalde-saludo {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 8px;
}
.q-open {
font-size: 56px;
color: #06a0e2;
font-family: Georgia, serif;
line-height: 0;
position: relative;
top: 20px;
flex-shrink: 0;
user-select: none;
}
.saludo-texto {
font-size: 16px;
font-weight: 700;
font-style: italic;
color: #2d3748;
margin: 0;
}
/* Plain <p> — not targeted by home-typography.css */
.alcalde-mensaje p {
font-size: 15px;
line-height: 1.72;
color: #4a5568;
margin: 0 0 10px;
}
.alcalde-mensaje p:last-child {
margin-bottom: 0;
}
/*
* Closing " — smaller than opener (asymmetry is intentional:
* the opener is a display element, the closer is punctuation).
* Sits inline at end of last sentence.
* top nudges it to optical mid-height of the last line.
*/
.q-close {
font-size: 36px;
color: #06a0e2;
font-family: Georgia, serif;
line-height: 0;
position: relative;
top: 10px;
margin-left: 1px;
user-select: none;
}
.alcalde-firma {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 16px;
}
.firma-viva {
font-size: 18px;
font-weight: 700;
color: #06a0e2;
letter-spacing: 0.5px;
}
.firma-linea {
width: 72px;
height: 2px;
background: linear-gradient(to right, #06a0e2, transparent);
margin-top: 4px;
border-radius: 0;
}
/* ── MOBILE ─────────────────────────────────────────────
Visibility handled by custom.css.
──────────────────────────────────────────────────────── */
.alcalde-section-mobile {
background: #f0f7fc;
padding: 20px 0 28px;
}
.mobile-alcalde-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
padding: 12px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(6, 160, 226, 0.1);
}
.mobile-alcalde-foto-wrap {
flex-shrink: 0;
width: 80px; height: 80px;
border-radius: 50%;
overflow: hidden;
border: 2.5px solid #06a0e2;
box-shadow: 0 4px 12px rgba(6, 160, 226, 0.25);
}
.mobile-alcalde-foto {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.mobile-alcalde-ident {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mobile-cargo-tag {
display: inline-block;
background: #06a0e2;
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 2px 9px;
border-radius: 20px;
align-self: flex-start;
}
/* be_style gives h2 large margins — reset needed */
.mobile-alcalde-nombre {
font-size: 15px;
font-weight: 700;
color: #1a202c;
margin: 0;
line-height: 1.2;
}
.mobile-alcalde-inst {
font-size: 11px;
color: #718096;
line-height: 1.3;
}
.mobile-alcalde-mensaje-card {
background: #fff;
border-radius: 0 12px 12px 0;
border-left: 4px solid #06a0e2;
padding: 14px 14px 14px 16px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
/* Plain <p> — not targeted by home-typography.css */
.mobile-alcalde-mensaje-card p {
font-size: 13.5px;
line-height: 1.68;
color: #4a5568;
margin: 0 0 10px;
}
.mobile-alcalde-mensaje-card p:last-child {
margin-bottom: 0;
}
.mobile-saludo {
font-weight: 700;
color: #2d3748 !important;
font-style: italic;
font-size: 14px !important;
margin-bottom: 10px !important;
}
/*
* Mobile opening " — smaller than desktop, stays inline
* with the saludo text (no line-height trick needed at 22px).
*/
.mob-q-open {
font-size: 22px;
color: #06a0e2;
font-family: Georgia, serif;
margin-right: 1px;
user-select: none;
vertical-align: middle;
}
/*
* Mobile closing " — same size as opener on mobile.
* Inline at end of last sentence.
*/
.mob-q-close {
font-size: 22px;
color: #06a0e2;
font-family: Georgia, serif;
margin-left: 1px;
user-select: none;
vertical-align: middle;
}
/* .alcalde-firma reused for mobile — already defined above */
/* ── RESPONSIVE ─────────────────────────────────────────
900px: stack photo above text (tablet, not covered by
custom.css which only breaks at 767px).
──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.alcalde-layout {
flex-wrap: wrap !important;
gap: 28px;
}
.alcalde-foto-col {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 420px;
margin: 0 auto !important;
}
}
@media (max-width: 767px) {
.alcalde-section-mobile {
padding: 14px 0 22px;
}
}
</style>
</body>
</html>