<!DOCTYPE html>
<html lang="es">


<head>
    <meta charset="utf-8">
<!-- CSRF Token -->
<meta name="csrf-token" content="xCnMFlSjn0R9WXa6oAOsV4MjRFbb1uhV3Mjsv45E">

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self' data: blob:;

  script-src 'self' 'unsafe-inline' 'unsafe-eval'
    https://static.elfsight.com
    https://uploads.aulopolis.com
    https://s3.us-east-1.amazonaws.com
    https://s3.us-east-1.amazonaws.com/aulopolis/store/1066/
    https://static.cloudflareinsights.com
    https://www.youtube.com
    https://player.vimeo.com
    https://www.vimeo.com
    https://dash.bunny.net
    https://docs.google.com
    https://ajax.googleapis.com
    https://code.jquery.com
    https://cdnjs.cloudflare.com
    https://cdn.jsdelivr.net
    https://revolution.themepunch.tools
    https://www.sliderrevolution.com
    https://account.sliderrevolution.com
    https://*.vimeocdn.com
    https://f.vimeocdn.com
    https://app.lottiefiles.com
    https://assets.lottiefiles.com
    https://lottie.host;

  style-src 'self' 'unsafe-inline'
    https://fonts.googleapis.com
    https://*.vimeocdn.com
    https://revolution.themepunch.tools
    https://app.lottiefiles.com
    https://assets.lottiefiles.com;

  font-src 'self' data:
    https://fonts.gstatic.com
    https://*.vimeocdn.com;

  connect-src 'self'
    https://player.vimeo.com
    https://www.youtube.com
    https://api.vimeo.com
    https://*.vimeo.com
    https://dash.bunny.net
    https://iframe.mediadelivery.net
    https://*.mediadelivery.net
    https://f.vimeocdn.com
    https://account.sliderrevolution.com
    https://www.sliderrevolution.com
    https://app.lottiefiles.com
    https://assets.lottiefiles.com
    https://lottie.host
    wss://*.vimeo.com;

  frame-src 'self'
    https://www.youtube.com
    https://player.vimeo.com
    https://www.vimeo.com
    https://dash.bunny.net
    https://iframe.mediadelivery.net
    https://*.mediadelivery.net
    https://docs.google.com
    https://*.vimeocdn.com
    https://www.sliderrevolution.com
    https://app.lottiefiles.com
    https://lottie.host
    https://*.lottie.host;

  img-src 'self' data: blob:
    https://*.vimeocdn.com
    https://i.vimeocdn.com
    https://i.ibb.co
    https://www.sliderrevolution.com
    https://assets.lottiefiles.com
    https://lottie.host;

  media-src 'self'
    https://uploads.aulopolis.com
    https://s3.us-east-1.amazonaws.com
    https://d1ibd3ggvz5ck0.cloudfront.net
    https://player.vimeo.com
    https://www.youtube.com
    https://*.vimeocdn.com
    https://dash.bunny.net
    https://iframe.mediadelivery.net
    https://*.mediadelivery.net
    https://assets.lottiefiles.com
    https://lottie.host
    blob:;

  worker-src 'self' blob:;

  child-src 'self' blob:
    https://player.vimeo.com
     https://lottie.host
    https://*.lottie.host;
">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name='robots' content="index, follow, all">

    <meta name="description" content="Home Page Description">
    <meta property="og:description" content="Home Page Description">
    <meta name='twitter:description' content='Home Page Description'>

<link rel='shortcut icon' type='image/x-icon' href="https://aulopolis.com/store/1/favicon.png">
<link rel="manifest" href="/mix-manifest.json?v=4">
<meta name="theme-color" content="#FFF">
<!-- Windows Phone -->
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-TileColor" content="#FFF">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-title" content="Aulopolis">
<link rel="apple-touch-icon" href="https://aulopolis.com/store/1/favicon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Android -->
<link rel='icon' href='https://aulopolis.com/store/1/favicon.png'>
<meta name="application-name" content="Aulopolis">
<meta name="mobile-web-app-capable" content="yes">
<!-- Other -->
<meta name="layoutmode" content="fitscreen/standard">
<link rel="home" href="https://aulopolis.com">

<!-- Open Graph -->
<meta property='og:title' content='Home'>
<meta name='twitter:card' content='summary'>
<meta name='twitter:title' content='Home'>


<meta property='og:site_name' content='https://aulopolis.com/Aulopolis'>
<meta property='og:image' content='https://aulopolis.com/store/1/favicon.png'>
<meta name='twitter:image' content='https://aulopolis.com/store/1/favicon.png'>
<meta property='og:locale' content='https://aulopolis.com/en_US'>
<meta property='og:type' content='website'>



    <title>Home | Aulopolis</title>

    <!-- General CSS File -->
    <link rel="stylesheet" href="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/toast/jquery.toast.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/simplebar/simplebar.css">
    <link rel="stylesheet" href="/assets/default/css/app.css">

    
       <head>

	<meta charset="UTF-8">
	<title>Aulópolis - La Metrópolis del Conocimiento</title>
	<meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
	<meta name="generator" content="Powered by Slider Revolution 6.6.16 - responsive, Mobile-Friendly Slider Plugin for WordPress with comfortable drag and drop interface." />
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="If you are still looking for a unique WordPress slider with text navigation, this template might be what you&#039;re looking for!" />
	<meta property="og:locale" content="en_US" />
	<meta property="og:type" content="article" />
	<meta property="og:title" content="Neon WordPress Slider With Text" />
	<meta property="og:description" content="If you are still looking for a unique WordPress slider with text navigation, this template might be what you&#039;re looking for!" />
	<meta property="og:url" content="https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/" />
	<meta property="og:site_name" content="Slider Revolution" />
	<meta property="article:modified_time" content="2023-06-23T04:57:42+00:00" />
	<meta property="og:image" content="https://www.sliderrevolution.com/wp-content/uploads/2022/10/preview-3.jpg" />
	<meta property="og:image:width" content="640" />
	<meta property="og:image:height" content="360" />
	<meta property="og:image:type" content="image/jpeg" />
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:label1" content="Est. reading time" />
	<meta name="twitter:data1" content="1 minute" />
    <link rel="canonical" href="index.html" />
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/owl-carousel2/owl.carousel.min.css">
    
    <link rel="stylesheet" href="/assets/default/vendors/revolution/css/settings.css">
    <link rel="stylesheet" href="/assets/default/vendors/revolution/css/layers.css">
    <link rel="stylesheet" href="/assets/default/vendors/revolution/css/navigation.css">

	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="https://www.sliderrevolution.com/xmlrpc.php">
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/themes/zakra/assets/fonts/themegrill-icons.woff2?5d42b271f668d2d6461ba91fc5a5a839" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/2555e1/00000000000000007735e603/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=n7&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/4de20a/00000000000000007735e604/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=i7&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/154cda/00000000000000007735e601/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=n1&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/78aca8/00000000000000007735e60d/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=n6&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/efe4a5/00000000000000007735e609/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=n4&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/3322cc/00000000000000007735e616/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=i4&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/1be3c2/00000000000000007735e606/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=n3&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://use.typekit.net/af/23e139/00000000000000007735e605/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&amp;fvd=n5&amp;v=3" crossorigin>
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/uploads/themepunch/gfonts/ibm-plex-mono/-F6sfjptAgt5VM-kVkqdyU8n1ioSblJ1gMoQ.woff2" crossorigin>
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/uploads/themepunch/gfonts/ibm-plex-mono/-F6qfjptAgt5VM-kVkqdyU8n3pQPwlBFgg.woff2" crossorigin>
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/uploads/themepunch/gfonts/ibm-plex-mono/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2" crossorigin>
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/uploads/themepunch/gfonts/ibm-plex-mono/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2" crossorigin>
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/uploads/themepunch/gfonts/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2" crossorigin>
	<link rel="preload" as="font" href="https://www.sliderrevolution.com/wp-content/plugins/revslider/public/assets/fonts/revicons/revicons.woff?5510888" crossorigin>
	<link rel="stylesheet" href="/public/assets/default/css/revslider-usedcss.css?v=1.0.1">


<style id='wp-block-library-theme-inline-css' type='text/css'></style>
<style id='classic-theme-styles-inline-css' type='text/css'></style>
<style id='global-styles-inline-css' type='text/css'></style>
<style id='cookie-law-info-gdpr-inline-css' type='text/css'></style>
<style id='zakra-style-inline-css' type='text/css'></style>

<style type="text/css"></style>
		<style type="text/css" id="custom-background-css"></style>
	
<link rel="icon" href="../../wp-content/uploads/2020/05/cropped-rsicon-32x32.png" sizes="32x32" />
<link rel="icon" href="../../wp-content/uploads/2020/05/cropped-rsicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="../../wp-content/uploads/2020/05/cropped-rsicon-180x180.png" />
<meta name="msapplication-TileImage" content="https://www.sliderrevolution.com/wp-content/uploads/2020/05/cropped-rsicon-270x270.png" />

<link rel="prefetch" href="https://account.sliderrevolution.com/portal/pricing/" as="document">
<link rel="prefetch" href="https://www.sliderrevolution.com/examples/" as="document">	

</head>

	<body class="templates-template-default single-templates postid-28424 custom-background wp-custom-logo tg-container--wide tg-site-layout--no-sidebar page">
  <!-- Google Tag Manager (noscript) --><noscript><iframe data-cli-class="cli-blocker-script" data-cli-label="Google Tag Manager"  data-cli-script-type="analytics" data-cli-block="true" data-cli-block-if-ccpa-optout="false" data-cli-element-position="body" data-cli-placeholder="Accept <a class='cli_manage_current_consent'>Analytics</a> cookies to view the content." data-cli-src="https://www.googletagmanager.com/ns.html?id=GTM-T9ZF6CG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->
<script type="text/javascript">ire('identify', {customerId: '', customerEmail: ''});</script>
	 

    
    <style>
        .menu-category > ul > li {
  position: relative;
  border-radius: 10px;
  font-weight: 500;
  background-color: #FACC15;

}
.navbar {
        z-index: 10 !important;
    }
/* 3. BARRA DE BÚSQUEDA: Integración Estética Silicon Valley */
.navbar-search {
    position: relative;
    z-index: 1200 !important;
    margin-top: 15px !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fondo Glassmorphism y Bordes */
.navbar-search .search-inner-container {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(6, 8, 22, 0.7); /* Negro grafito con transparencia */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 10px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Efecto de línea luminosa interna (Glow sutil) */
.navbar-search::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(90deg, rgba(100, 108, 255, 0), rgba(100, 108, 255, 0.3), rgba(147, 51, 234, 0.3), rgba(147, 51, 234, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Input Minimalista */
.navbar-search input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
}

.navbar-search input::placeholder {
    color: #fff;
}

/* Iconografía OpenAI Style */
.navbar-search .search-icon-svg {
    width: 18px;
    height: 18px;
    color: #fff;
    flex-shrink: 0;
}

/* Atajo de teclado (Linear Style) */
.navbar-search .shortcut-ui {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: 600;
}

/* --- ESTADOS DINÁMICOS --- */

.navbar-search:focus-within {
    transform: translateY(-2px);
}

.navbar-search:focus-within .search-inner-container {
    background: rgba(6, 8, 22, 0.9);
    border-color: rgba(100, 108, 255, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(100, 108, 255, 0.1);
}

.navbar-search:focus-within::before {
    opacity: 1; /* Activa el borde luminoso */
}

.navbar-search:focus-within .search-icon-svg {
    color: #646cff;
}
=========================================================
   ESTILO PARA ICONOS (CARRITO Y CAMPANA)
========================================================= */

/* Color inicial: Blanco */
.feather-shopping-cart, 
.feather-bell {
    color: #FFFFFF !important;
    stroke: #FFFFFF; /* Feather usa stroke para el color del trazado */
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

/* Estado Hover: Amarillo */
.feather-shopping-cart:hover, 
.feather-bell:hover {
    color: #FACC15 !important; /* Amarillo vibrante */
    stroke: #FACC15;
    transform: translateY(-2px); /* Pequeño salto elegante */
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.4)); /* Brillo amarillo */
}

/* =========================================================
    AULOPOLIS — MOBILE FIX (Z-INDEX & INTERACTION)
========================================================= */

@media (max-width: 991px) {

  .navbar {
    z-index: 1000 !important;

    background: linear-gradient(
        90deg,
        #060816 0%,
        #110B29 40%,
        #3B0B7E 100%
    ) !important;

    border-bottom: 1px solid rgba(124, 58, 237, 0.3) !important;

    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
}

    /* 2. BOTÓN HAMBURGUESA: Forzamos que sea clickeable */
    .navbar-toggler {
        position: relative;
        z-index: 1100 !important; /* Por encima de la barra de búsqueda */
        cursor: pointer;
        pointer-events: auto !important;
    }

   /* 3. BARRA DE BÚSQUEDA: Integración Estética Silicon Valley */
.navbar-search {
    position: relative;
    z-index: 900 !important;
    margin-top: 15px !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fondo Glassmorphism y Bordes */
.navbar-search .search-inner-container {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(6, 8, 22, 0.7); /* Negro grafito con transparencia */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 10px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Efecto de línea luminosa interna (Glow sutil) */
.navbar-search::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(90deg, rgba(100, 108, 255, 0), rgba(100, 108, 255, 0.3), rgba(147, 51, 234, 0.3), rgba(147, 51, 234, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Input Minimalista */
.navbar-search input {
    color: #FFFFFF !important; /* Blanco puro */
    font-weight: 500 !important; /* Aumentamos el peso a Medium para que resalte */
    font-size: 16px !important;  /* Tamaño estándar de Silicon Valley para legibilidad */
    letter-spacing: 0.01em;      /* Espaciado elegante */
}

.navbar-search input::placeholder {
    color: #ffffff !important; /* Blanco al 50% para que sea legible pero secundario */
    opacity: 1 !important; /* Evitamos que el navegador lo difumine de más */
}

/* Iconografía OpenAI Style */
.navbar-search .search-icon-svg {
    width: 18px;
    height: 18px;
    color: rgba(142, 145, 150, 0.8);
    flex-shrink: 0;
}

/* Atajo de teclado (Linear Style) */
.navbar-search .shortcut-ui {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: 600;
}

/* --- ESTADOS DINÁMICOS --- */

.navbar-search:focus-within {
    transform: translateY(-2px);
}

.navbar-search:focus-within .search-inner-container {
    background: rgba(6, 8, 22, 0.9);
    border-color: rgba(100, 108, 255, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(100, 108, 255, 0.1);
}

.navbar-search:focus-within::before {
    opacity: 1; /* Activa el borde luminoso */
}

.navbar-search:focus-within .search-icon-svg {
    color: #646cff;
}

    /* 4. FULLSCREEN MENU: La capa más alta de todas */
    .navbar-toggle-content {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        
        background: rgba(6, 8, 22, 0.98) !important;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);

        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2500 !important; 
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-20px);
        transition: opacity .45s ease, transform .45s ease, visibility .45s;
    }
.navbar-toggle-content.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
   .navbar-brand img {
        max-height: 200px; /* Ajusta según tu logo */
        max-width: 200px;
        position: relative;
        right: 130px;
    }
/* =========================================================
   ESTILO PARA ICONOS (CARRITO Y CAMPANA)
========================================================= */

/* Color inicial: Blanco */
.feather-shopping-cart, 
.feather-bell {
    color: #FFFFFF !important;
    stroke: #FFFFFF; /* Feather usa stroke para el color del trazado */
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

/* Estado Hover: Amarillo */
.feather-shopping-cart:hover, 
.feather-bell:hover {
    color: #FACC15 !important; /* Amarillo vibrante */
    stroke: #FACC15;
    transform: translateY(-2px); /* Pequeño salto elegante */
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.4)); /* Brillo amarillo */
}

/* Ajuste de margen para la clase que ya tienes */
.mr-10 {
    margin-right: 10px !important;
}
  .navbar .nav-item .nav-link {
    /* TAMAÑO DE FUENTE GRANDE Y PROFESIONAL */
    font-size: 14px;
    font-weight: 700;
    color: #FACC15; /* Azul marino profundo para máxima elegancia */
    text-align: left; /* Alineación a la izquierda para un look tipo editorial */
    padding: 15px 25px;
    display: block;
    border-left: 4px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
.menu-category > ul > li {

  position: relative;

  border-radius: 10px;

  font-weight: 500;

color: #FACC15;

background-color:transparent;

}

.navbar .navbar-toggler {

  font-size: 1rem;

  background-color: #FACC15;

}




.navbar {
        z-index: 1000 !important;
    }

.custom-dropdown.navbar-auth-user-dropdown.position-relative.ml-50 {
    z-index: 2501;
}
.feather.feather-x {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

#navbarClose:hover .feather.feather-x {
    stroke: #FACC15 !important;
    color: #FACC15 !important;
    transform: rotate(90deg) scale(1.08);
}
 #rev_slider_1307_1_wrapper .uranus.tparrows {
        display: none !important;
    }
}

/* =========================================================
   AULÓPOLIS FOOTER — TECH / AI / PREMIUM
========================================================= */

.footer {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at top left, rgba(0, 245, 255, .16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, .24), transparent 38%),
        linear-gradient(180deg, #050816 0%, #02030a 100%) !important;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 80px !important;
    margin-top: 90px;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
    pointer-events: none;
    opacity: .8;
}

.footer::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    right: -180px;
    bottom: -220px;
    background: radial-gradient(circle, rgba(0, 255, 220, .20), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
}

.footer .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   NEWSLETTER CARD
========================================================= */

.footer-subscribe {
    position: relative;
    margin-top: -150px;
    margin-bottom: 70px;
    padding: 34px 34px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(79,70,229,.96) 0%, rgba(6,182,212,.92) 100%) !important;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        0 28px 80px rgba(0,0,0,.42),
        0 0 45px rgba(6,182,212,.20);
    overflow: hidden;
}

.footer-subscribe::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.26), transparent 32%),
        radial-gradient(circle at bottom left, rgba(0,255,220,.24), transparent 36%);
    pointer-events: none;
}

.footer-subscribe > * {
    position: relative;
    z-index: 2;
}

.footer-subscribe strong {
    display: block;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: -.8px;
    line-height: 1.1;
}

.footer-subscribe span {
    color: rgba(255,255,255,.84) !important;
    font-size: 14px !important;
}

.footer-subscribe .subscribe-input {
    max-width: 460px;
    height: 66px;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.7),
        0 18px 45px rgba(0,0,0,.25);
}

.footer-subscribe .subscribe-input .form-control {
    height: 46px;
    border-radius: 999px !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 13px;
    padding-left: 20px;
}

.footer-subscribe .subscribe-input .form-control::placeholder {
    color: rgba(15,23,42,.48);
}

.footer-subscribe .subscribe-input .btn {
    height: 46px;
    min-width: 118px;
    border: none !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, #4f46e5 0%, #06b6d4 65%, #00f5d4 100%) !important;
    color: #fff !important;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(6,182,212,.38);
}

/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer .row .col-6.col-md-3 {
    margin-bottom: 32px;
}

.footer .header {
    position: relative;
    display: inline-block !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.footer .header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
    box-shadow: 0 0 14px rgba(34,211,238,.6);
}

.footer .mt-20,
.footer .mt-20 * {
    color: rgba(255,255,255,.68) !important;
    font-size: 14px;
    line-height: 1.9;
}

.footer a {
    color: rgba(255,255,255,.68) !important;
    text-decoration: none !important;
    transition: all .22s ease;
}

.footer a:hover {
    color: #67e8f9 !important;
    padding-left: 3px;
}

/* =========================================================
   BOTTOM BAR
========================================================= */

.footer .border-blue {
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 0 !important;
    margin-top: 32px !important;
}

.footer-logo img {
    max-width: 170px;
    max-height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(34,211,238,.18));
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all .22s ease;
}

.footer-social a:hover {
    transform: translateY(-3px);
    background: rgba(34,211,238,.16);
    border-color: rgba(34,211,238,.38);
    box-shadow: 0 12px 28px rgba(6,182,212,.18);
    padding-left: 0;
}

.footer-social img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    margin-right: 0 !important;
    filter: brightness(0) invert(1);
    opacity: .88;
}

/* =========================================================
   COPYRIGHT CARD
========================================================= */

.footer-copyright-card {
    position: relative;
    z-index: 2;
    background: rgba(2, 6, 23, .78) !important;
    border-top: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.footer-copyright-card .font-14,
.footer-copyright-card .text-white {
    color: rgba(255,255,255,.72) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {
    .footer {
        padding-top: 64px !important;
        margin-top: 70px;
    }

    .footer-subscribe {
        margin-top: -120px;
        padding: 28px 22px !important;
        border-radius: 24px !important;
        text-align: center;
    }

    .footer-subscribe strong {
        font-size: 25px !important;
    }

    .footer-subscribe .subscribe-input {
        max-width: 100%;
        height: auto;
        border-radius: 22px !important;
    }

    .footer-subscribe .form-group {
        flex-direction: column;
        gap: 12px;
    }

    .footer-subscribe .subscribe-input .btn {
        width: 100%;
    }

    .footer .border-blue {
        flex-direction: column;
        gap: 22px;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-copyright-card .container {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .footer .row .col-6.col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .footer .header::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer a:hover {
        padding-left: 0;
    }
}

/* =========================================================
   FIX GLOBAL SCROLL — AULÓPOLIS
========================================================= */

html,
body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

}

        @font-face {
                      font-family: 'main-font-family';
                      font-style: normal;
                      font-weight: 400;
                      font-display: swap;
                      src: url(/store/1/fonts/montserrat-regular.woff2) format('woff2');
                    }@font-face {
                      font-family: 'main-font-family';
                      font-style: normal;
                      font-weight: bold;
                      font-display: swap;
                      src: url(/store/1/fonts/montserrat-bold.woff2) format('woff2');
                    }@font-face {
                      font-family: 'main-font-family';
                      font-style: normal;
                      font-weight: 500;
                      font-display: swap;
                      src: url(/store/1/fonts/montserrat-medium.woff2) format('woff2');
                    }@font-face {
                      font-family: 'rtl-font-family';
                      font-style: normal;
                      font-weight: 400;
                      font-display: swap;
                      src: url(/store/1/fonts/Vazir-Regular.woff2) format('woff2');
                    }@font-face {
                      font-family: 'rtl-font-family';
                      font-style: normal;
                      font-weight: bold;
                      font-display: swap;
                      src: url(/store/1/fonts/Vazir-Bold.woff2) format('woff2');
                    }@font-face {
                      font-family: 'rtl-font-family';
                      font-style: normal;
                      font-weight: 500;
                      font-display: swap;
                      src: url(/store/1/fonts/Vazir-Medium.woff2) format('woff2');
                    }

        :root{
--primary:#060816;
--primary-border:#ffb200;
--primary-hover:#ffb200;
--primary-border-hover:#3900af;
--primary-btn-color-hover:#ffffff;
--body_bg:#060816;
}

    </style>


            <link rel="stylesheet" href="/assets/vendors/nprogress/nprogress.min.css">
<script src="/assets/vendors/nprogress/nprogress.min.js"></script>
<script>
    NProgress.configure({
        showSpinner: true, // Hide spinner
        easing: 'ease',     // Animation style
        speed: 500          // Animation speed
    });

    document.addEventListener("DOMContentLoaded", function () {
        NProgress.start(); // Start progress bar
    });

    window.addEventListener('load', () => {
        NProgress.done();
    });
</script>
    </head>

<body class="">

<div id="app" class=" ">
    
            <div class="aulopolis-topnav">

    <div class="aulopolis-topnav-inner">

        <!-- LEFT: BRAND / CONTACT -->
        <div class="aulopolis-topnav-left">

<a href="/" class="aulopolis-topnav-brand aulopolis-topnav-brand--image">
    <img 
        src="/store/1/LOGO-AULOPOLIS-NEON.png" 
        alt="Aulópolis"
        class="aulopolis-topnav-logo"
    >
</a>

            
        </div>


        <!-- CENTER: SEARCH 
        <div class="aulopolis-topnav-center">

            <form action="/search" method="get" class="aulopolis-search">
                <input
                    type="text"
                    name="search"
                    placeholder="Buscar..."
                    aria-label="Search">

                <button type="submit" class="aulopolis-search-btn">
                    <i data-feather="search" width="18" height="18"></i>
                </button>
            </form>

        </div>-->


        <!-- RIGHT: ACTIONS -->
        <div class="aulopolis-topnav-right">

            
            <div class="aulopolis-topnav-control">
                            </div>

            
            

            <div class="aulopolis-user-menu">
                <div class="d-flex align-items-center ml-md-50">
        <a href="/login" class="py-5 px-10 mr-10 text-dark-yellow font-14">Iniciar sesión</a>
        <a href="/register" class="py-5 px-10 text-dark-yellow font-14">Registrarse</a>
    </div>
            </div>
        </div>

    </div>

</div>


        <div id="navbarVacuum" style="display:none;"></div>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light" style="display:none;">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between w-100">

            <a class="navbar-brand navbar-order d-flex align-items-center justify-content-center mr-0 ml-auto" href="/">
                                    <img src="/store/1/logo-aulopolis-nuevo.png" class="img-cover-logo" alt="site logo">
                            </a>

<button class="navbar-toggler navbar-order" type="button" id="navbarToggle">
    <span class="navbar-toggler-icon"></span>
</button>             


            <div class="mx-lg-30 d-none d-lg-flex flex-grow-1 navbar-toggle-content " id="navbarContent">
                <div class="navbar-toggle-header text-right d-lg-none">
                    <button class="btn-transparent" id="navbarClose">
                        <i data-feather="x" width="32" height="32"></i>
                    </button>
                </div>

                <ul class="navbar-nav mr-auto d-flex align-items-center">
                                            <li class="mr-lg-25">
                            <div class="menu-category">
                                <ul>
                                    <li class="cursor-pointer user-select-none d-flex xs-categories-toggle">
                                        <i data-feather="grid" width="20" height="20" class="mr-10 d-none d-lg-block"></i>
                                        Categorías

                                        <ul class="cat-dropdown-menu">
                                                                                            <li>
                                                    <a href="/categories/lenguajes-programacion" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Programación
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/java">
                                                                        
                                                                        Java
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/javascript">
                                                                        
                                                                        Javascript
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/html">
                                                                        
                                                                        HTML
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/CSS">
                                                                        
                                                                        CSS
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/typescript">
                                                                        
                                                                        Typescript
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/React">
                                                                        
                                                                        React
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/angular">
                                                                        
                                                                        Angular
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/python">
                                                                        
                                                                        Python
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/c++">
                                                                        
                                                                        C-plus-plus
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/c-sharp">
                                                                        
                                                                        C#
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/go">
                                                                        
                                                                        GO
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/kotlin">
                                                                        
                                                                        Kotlin
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/swift">
                                                                        
                                                                        Swift
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/php">
                                                                        
                                                                        PHP
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/lenguajes-programacion/ruby">
                                                                        
                                                                        Ruby
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/softwares-industriales" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Softwares Gestión Empresarial
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/softwares-industriales/primavera-p6">
                                                                        
                                                                        Primavera P6
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/softwares-industriales/microsoft-project">
                                                                        
                                                                        Microsoft Project
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/softwares-industriales/sap-erp">
                                                                        
                                                                        SAP ERP
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/diseno-3d" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Software Diseño 3D
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/autocad">
                                                                        
                                                                        AutoCAD
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/fusion-360">
                                                                        
                                                                        Fusion 360
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/sketchup">
                                                                        
                                                                        SketchUp
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/blender">
                                                                        
                                                                        Blender
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/3ds-max">
                                                                        
                                                                        3ds Max
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/cinema-4d">
                                                                        
                                                                        Cinema 4D
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/diseno-3d/rhinoceros-3d">
                                                                        
                                                                        Rhinoceros 3D
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/bases-datos" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Bases de Datos
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/curso-sql">
                                                                        
                                                                        SQL
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/mysql">
                                                                        
                                                                        MySQL
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/curso-sql-server">
                                                                        
                                                                        Microsoft SQL Server
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/mongodb">
                                                                        
                                                                        MongoDB
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/bases-datos-nosql">
                                                                        
                                                                        NoSQL
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/postgre-sql">
                                                                        
                                                                        PostgreSQL
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/bases-datos/oracle-administracion-de-base-de-datos">
                                                                        
                                                                        Oracle SQL
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/coaching-liderazgo" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Coaching y Liderazgo
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/coaching-liderazgo/programacion-neurolinguistica">
                                                                        
                                                                        PNL - Programación Neurolinguística
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/coaching-liderazgo/coaching-transformacional">
                                                                        
                                                                        Coaching Transformacional
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/software-microsoft" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Software de Microsoft
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-word">
                                                                        
                                                                        Microsoft Word
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-excel">
                                                                        
                                                                        Microsoft Excel
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-powerpoint">
                                                                        
                                                                        Microsoft PowerPoint
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-outlook">
                                                                        
                                                                        Microsoft Outlook
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-onenote">
                                                                        
                                                                        Microsoft OneNote
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/Microsoft Access">
                                                                        
                                                                        Microsoft Access
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-365">
                                                                        
                                                                        Microsoft 365
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/visual-studio">
                                                                        
                                                                        Visual Studio
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/dotnet-framework">
                                                                        
                                                                        .NET Framework
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/asp-net">
                                                                        
                                                                        ASP.NET
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/Power Apps">
                                                                        
                                                                        Power Apps
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/power-automate">
                                                                        
                                                                        Power Automate
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-azure">
                                                                        
                                                                        Microsoft Azure
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-dynamics-365">
                                                                        
                                                                        Microsoft Dynamics 365
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/power-bi">
                                                                        
                                                                        Microsoft Power BI
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-sharepoint">
                                                                        
                                                                        Microsoft SharePoint
                                                                    </a>
                                                                </li>
                                                                                                                            <li>
                                                                    <a href="/categories/software-microsoft/microsoft-teams">
                                                                        
                                                                        Microsoft Teams
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/electronica" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Electrónica
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/electronica/robotica">
                                                                        
                                                                        Arduino
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                            <li>
                                                    <a href="/categories/inteligencia-artificial" class="js-has-subcategory">
                                                        <div class="d-flex align-items-center">
                                                            
                                                            Inteligencia Artificial
                                                        </div>

                                                                                                                    <i data-feather="chevron-right" width="20" height="20" class="d-none d-lg-inline-block ml-10"></i>
                                                            <i data-feather="chevron-down" width="20" height="20" class="d-inline-block d-lg-none"></i>
                                                                                                            </a>

                                                                                                            <ul class="sub-menu" data-simplebar >
                                                                                                                            <li>
                                                                    <a href="/categories/inteligencia-artificial/deep-learning">
                                                                        
                                                                        Deep Learning
                                                                    </a>
                                                                </li>
                                                                                                                    </ul>
                                                                                                    </li>
                                                                                    </ul>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    
                                                                        <li class="nav-item">
                                <a class="nav-link" href="/">Inicio</a>
                            </li>
                                                    <li class="nav-item">
                                <a class="nav-link" href="/classes?sort=newest">Cursos</a>
                            </li>
                                                    <li class="nav-item">
                                <a class="nav-link" href="/blog">Blog</a>
                            </li>
                                                    <li class="nav-item">
                                <a class="nav-link" href="/products">MarketPlace</a>
                            </li>
                                                            </ul>
                
            </div>

            <div class="nav-icons-or-start-live navbar-order d-flex align-items-center justify-content-end">

                
                
                <div class="d-none nav-notify-cart-dropdown top-navbar">
                    <div class="dropdown">

            <button type="button" disabled class="btn btn-transparent dropdown-toggle" id="navbarShopingCart" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
            <i data-feather="shopping-cart" width="20" height="20" class="mr-10"></i>

                    </button>
    
    <div class="dropdown-menu" aria-labelledby="navbarShopingCart">
        <div class="d-md-none border-bottom mb-20 pb-10 text-right">
            <i class="close-dropdown" data-feather="x" width="32" height="32" class="mr-10"></i>
        </div>
        <div class="h-100">
            <div class="navbar-shopping-cart h-100" data-simplebar>
                                    <div class="d-flex align-items-center text-center py-50">
                        <i data-feather="shopping-cart" width="20" height="20" class="mr-10"></i>
                        <span class="">Tu carro está vacía</span>
                    </div>
                            </div>
        </div>
    </div>
</div>

                    <div class="border-left mx-15"></div>

                    <div class="dropdown">
    <button type="button" class="btn btn-transparent2 dropdown-toggle" disabled id="navbarNotification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i data-feather="bell" width="20" height="20" class="mr-10"></i>

            </button>

    <div class="dropdown-menu pt-20" aria-labelledby="navbarNotification">
        <div class="d-flex flex-column h-100">
            <div class="mb-auto navbar-notification-card" data-simplebar>
                <div class="d-md-none border-bottom mb-20 pb-10 text-right">
                    <i class="close-dropdown" data-feather="x" width="32" height="32" class="mr-10"></i>
                </div>

                                    <div class="d-flex align-items-center text-center py-50">
                        <i data-feather="bell" width="20" height="20" class="mr-10"></i>
                        <span class="">Notificaciones vacías</span>
                    </div>
                
            </div>

                    </div>
    </div>
</div>
                </div>

            </div>
        </div>
    </div>
</nav>

<!--<div class="mobile-hero-logo d-lg-none">
            <img src="/store/1/logo-aulopolis-nuevo.png" alt="Aulopolis">
    </div-->


    
    
    
<main id="main" class="site-main" style="opacity: 1;">
    <div id="content" class="site-content">
        <div id="rs-fullblock">

            <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">
                <div class="wp-block-group__inner-container">

                    <div class="wp-block-themepunch-revslider revslider" data-modal="false" data-slidertitle="Neon WordPress Slider">

                        <!-- START Neon WordPress Slider REVOLUTION SLIDER 6.6.16 -->
                        <p class="rs-p-wp-fix"></p>

                        <rs-module-wrap id="rev_slider_1307_1_wrapper" data-source="gallery" style="visibility:hidden;background:#000000;padding:0;">
                            <rs-module id="rev_slider_1307_1" class="rs-respect-topbar" data-version="6.6.16">

                                <rs-slides style="overflow: hidden; position: absolute;">

                                   <rs-slide
    style="position: absolute;"
    data-key="rs-2717"
    data-title="Aulópolis"
    data-thumb="https://aulopolis.com/public/assets/default/img/banners/banner_13.jpg"
    data-anim="eng:transitionPack;d:20;e:tpbasic;ms:2000;"
    data-in="o:1;"
    data-out="a:false;"
    data-p1="01"
    data-tpack='ie:power2.out;ef:water;iny:25;'>

    <img
        src="https://aulopolis.com/public/assets/default/img/banners/BANNER-ELEGE.png"
        alt="Aulópolis Banner"
        class="rev-slidebg tp-rs-img hero-bg"
        data-bgfit="cover"
        data-bgposition="center center"
        data-bgrepeat="no-repeat"
        data-no-retina>





    <!-- =========================================
         AULÓPOLIS HERO CONTENT
    ========================================== -->
    <div class="aulopolis-hero">



        <!-- =========================================
             AULÓPOLIS NEXUS MAP — PLANETAS HERO
        ========================================== -->
        <div class="aulopolis-nexus-map">

            <a href="/route/ia" class="nexus-node nexus-ai" id="nodeIA">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">⌬</span>
                    <span class="nexus-label">AI</span>
                </span>
            </a>

            <a href="/route/code" class="nexus-node nexus-code">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">&lt;/&gt;</span>
                    <span class="nexus-label">CODE</span>
                </span>
            </a>

            <a href="/route/cyber" class="nexus-node nexus-cyber">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">🛡</span>
                    <span class="nexus-label">CYBER</span>
                </span>
            </a>

            <a href="/route/data" class="nexus-node nexus-data">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">▦</span>
                    <span class="nexus-label">DATA</span>
                </span>
            </a>

            <a href="/route/game" class="nexus-node nexus-game">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">🎮</span>
                    <span class="nexus-label">GAME</span>
                </span>
            </a>

            <a href="/route/music" class="nexus-node nexus-sound">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">◎</span>
                    <span class="nexus-label">SOUND</span>
                </span>
            </a>

            <a href="/route/video" class="nexus-node nexus-creator">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">✦</span>
                    <span class="nexus-label">CREATOR</span>
                </span>
            </a>

            <a href="/route/3d" class="nexus-node nexus-3d">
                <span class="nexus-orbit"></span>
                <span class="nexus-ring"></span>
                <span class="nexus-pulse"></span>
                <span class="nexus-orb">
                    <span class="nexus-icon">⬡</span>
                    <span class="nexus-label">3D</span>
                </span>
            </a>

        </div>

        <!-- LEFT CONTENT -->
        <div class="hero-left">

            <div class="hero-tag hero-brand-title">
<span class="hero-brand-name" style="font-size: 22px !important; font-weight: 800; letter-spacing: 3px; color: #ffffff; text-transform: uppercase;">
        AULÓPOLIS
    </span>
    <span class="hero-brand-subtitle">La metrópolis del conocimiento</span>
            </div>

            <h1 class="hero-title">
                <span>ELIGE</span>
                <span>QUIÉN</span>
                <span>QUIERES</span>
                <span>SER</span>
            </h1>
            
            <h1 class="hero-title-mobile">
    <span>ELIGE QUIÉN</span>
    <strong>QUIERES SER</strong>
</h1>

<div class="hero-holo-divider">
    <span class="holo-line"></span>

    <span class="holo-logo">
        <img src="/public/store/1/default_images/banners/LOGO-A.png
" alt="Aulópolis">
    </span>

    <span class="holo-line"></span>
</div>

            <p class="hero-brand-description">
                Elige una ruta. Desbloquea habilidades. Construye tu futuro con IA,
                tecnología y formación aplicada.
            </p>
<div class="mobile-routes-slider mobile-only">

    <a href="/route/ia" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-01.png">
    </a>

    <a href="/route/code" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-02.png">
    </a>

    <a href="/route/data" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-03.png">
    </a>

    <a href="/route/video" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-04.png">
    </a>

    <a href="/route/music" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-05.png">
    </a>

    <a href="/route/game" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-06.png">
    </a>

    <a href="/route/cyber" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-07.png">
    </a>

    <a href="/route/3d" class="mobile-route-card">
        <img src="/public/store/1/default_images/banners/CARD-08.png">
    </a>

</div>


            <div class="hero-actions">

                <a href="https://aulopolis-unity2.dacarvaj2.workers.dev/" class="hero-primary-btn">
                    Explorar rutas
                    <span>→</span>
                </a>

                <a href="/ruta-aprendizaje-ai" class="hero-secondary-btn">
                    Comenzar AI Core
                    <span>⌬</span>
                </a>

            </div>
            
             
            <div class="hero-stats">

                <div class="hero-stat">
                    <span class="hero-stat-icon">
                        <svg viewBox="0 0 24 24" fill="none">
                            <path d="M4 19V8.5L12 4L20 8.5V19L12 14.5L4 19Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                            <path d="M12 4V14.5" stroke="currentColor" stroke-width="1.8"/>
                            <path d="M4 8.5L12 13L20 8.5" stroke="currentColor" stroke-width="1.8"/>
                        </svg>
                    </span>
                    <span>8 rutas activas</span>
                </div>

                <div class="hero-stat">
                    <span class="hero-stat-icon">
                        <svg viewBox="0 0 24 24" fill="none">
                            <path d="M7 17L17 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                            <path d="M8 7H17V16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M5 5H19V19H5V5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                        </svg>
                    </span>
                    <span>12.430 XP</span>
                </div>

                <div class="hero-stat">
                    <span class="hero-stat-icon">
                        <svg viewBox="0 0 24 24" fill="none">
                            <path d="M9 11L11 13L15.5 8.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M5 4H19V20H5V4Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                            <path d="M8 17H16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <span>Misiones desbloqueables</span>
                </div>

            </div>

        </div>

    </div>

</rs-slide>
                            </rs-module>

                            <script>
                                setREVStartSize({
                                    c: 'rev_slider_1307_1',
                                    rl: [1500, 1240, 778, 480],
                                    el: [800, 700, 500, 500],
                                    gw: [1240, 1024, 778, 480],
                                    gh: [800, 700, 500, 500],
                                    type: 'standard',
                                    justify: '',
                                    layout: 'fullscreen',
                                    offsetContainer: '#masthead',
                                    offset: '',
                                    mh: "0"
                                });

                                if (
                                    window.RS_MODULES !== undefined &&
                                    window.RS_MODULES.modules !== undefined &&
                                    window.RS_MODULES.modules["revslider13071"] !== undefined
                                ) {
                                    window.RS_MODULES.modules["revslider13071"].once = false;
                                    window.revapi1307 = undefined;

                                    if (window.RS_MODULES.checkMinimal !== undefined) {
                                        window.RS_MODULES.checkMinimal();
                                    }
                                }
                            </script>

                        </rs-module-wrap>

                    </div>

                </div>
            </div>

        </div>
    </div>
</main>


<!-- =========================================
     AULÓPOLIS ROUTES CARDS
========================================= -->
<section class="aulopolis-routes-section">

    <div class="hero-routes">

        <a href="/route/ia" class="route-card ai-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-01.png" alt="Inteligencia Artificial">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
            <span class="route-number" data-mobile="IA">01</span>
            <h3>Inteligencia Artificial</h3>
                <p>AI Core</p>

                <div class="route-progress">
                    <span style="width:78%"></span>
                </div>
            </div>
        </a>

        <a href="/route/code" class="route-card code-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-02.png" alt="Programador Full Stack">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">02</span>
                <h3>Programador Full Stack</h3>
                <p>Code Core</p>

                <div class="route-progress">
                    <span style="width:45%"></span>
                </div>
            </div>
        </a>
        
        <a href="/route/cyber" class="route-card cyber-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-07.png" alt="Ciber Seguridad">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">03</span>
                <h3>Ciber Seguridad</h3>
                <p>Cyber Core</p>

                <div class="route-progress">
                    <span style="width:45%"></span>
                </div>
            </div>
        </a>


        <a href="/route/video" class="route-card creator-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-04.png" alt="Editor de Video">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">04</span>
                <h3>Editor de Video</h3>
                <p>Creator Core</p>

                <div class="route-progress">
                    <span style="width:20%"></span>
                </div>
            </div>
        </a>
        
        
        <a href="/route/music" class="route-card sound-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-05.png" alt="Producción Musical">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">05</span>
                <h3>Producción Musical</h3>
                <p>Sound Core</p>

                <div class="route-progress">
                    <span style="width:45%"></span>
                </div>
            </div>
        </a>


        <a href="/route/game" class="route-card game-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-06.png" alt="Desarrollador de Video Juegos">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">06</span>
                <h3>Desarrollador de Video Juegos</h3>
                <p>Game Core</p>

                <div class="route-progress">
                    <span style="width:20%"></span>
                </div>
            </div>
        </a>
        
        
        <a href="/route/data" class="route-card data-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-03.png" alt="Data Analytics">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">07</span>
                <h3>Data Analytics</h3>
                <p>Data Core</p>

                <div class="route-progress">
                    <span style="width:20%"></span>
                </div>
            </div>
        </a>

        <a href="/route/3d" class="route-card three-d-card">
            <div class="route-image">
                <img src="public/store/1/default_images/banners/CARD-08.png" alt="Diseñador 3D">
            </div>

            <div class="route-overlay"></div>

            <div class="route-content">
                <span class="route-number">08</span>
                <h3>Diseñador 3D</h3>
                <p>3D Core</p>

                <div class="route-progress">
                    <span style="width:20%"></span>
                </div>
            </div>
        </a>

    </div>

</section>






<<!-- =========================================
     AULÓPOLIS HOME EXPERIENCE
========================================= -->
<div class="aulopolis-home-experience">

    <!-- =========================================
         AULÓPOLIS FLOW — CÓMO FUNCIONA
    ========================================== -->
    <section class="aulopolis-flow-section">

        <div class="flow-header">
            <h2>Cómo funciona</h2>
            <span>Un sistema de evolución diseñado por y para tu futuro.</span>
        </div>

        <div class="flow-grid">

            <div class="flow-card">
                <span class="flow-shine"></span>
                <div class="flow-number">1</div>

                <div class="flow-text">
                    <h3>Elige una ruta.</h3>
                    <p>Explora los distritos y selecciona el camino que te llevará más lejos.</p>
                </div>

                <div class="flow-orb">
             <span class="orb-hud"></span>
                </div>            


            </div>

            <div class="flow-card">
                <span class="flow-shine"></span>
                <div class="flow-number">2</div>

                <div class="flow-text">
                    <h3>Completa misiones.</h3>
                    <p>Aprende con lecciones, retos y proyectos aplicados con IA.</p>
                </div>

                    <div class="flow-orb cube">
                     <span class="orb-hud"></span>
                    </div>

</div>

            <div class="flow-card">
                <span class="flow-shine"></span>
                <div class="flow-number">3</div>

                <div class="flow-text">
                    <h3>Gana progreso.</h3>
                    <p>Suma XP, desbloquea niveles y alcanza nuevos rangos.</p>
                </div>

            <div class="flow-orb diamond">
                 <span class="orb-hud"></span>
            </div>            
        </div>

        </div>

    </section>

    <!-- =========================================
         AULÓPOLIS AI CORE — REACTOR NEXUS
    ========================================== 
    <section class="aulopolis-ai-core-section">

        <div class="ai-core-info">

            <span class="ai-core-kicker">AI CORE</span>

            <h2>El núcleo que impulsa todas las rutas.</h2>

            <p>
                Accede al centro de la inteligencia. Domina las habilidades del futuro
                mediante misiones, nodos y progreso interactivo.
            </p>

            <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Entrar a AI Core
                <span>→</span>
            </a>

        </div>

        <div class="ai-core-map">

            <div class="ai-core-modules left mobile-hide">
                <a href="/ruta-aprendizaje-ai" class="ai-module">Fundamentos IA</a>
                <a href="/ruta-aprendizaje-ai" class="ai-module">Modelos IA</a>
                <a href="/ruta-aprendizaje-ai" class="ai-module">Herramientas IA</a>
                <a href="/ruta-aprendizaje-ai" class="ai-module">Automatización</a>
            </div>

            <div class="ai-core-reactor-nexus">
                <span class="reactor-orbit orbit-a"></span>
                <span class="reactor-orbit orbit-b"></span>
                <span class="reactor-orbit orbit-c"></span>
                <span class="reactor-pulse"></span>
                <span class="reactor-grid"></span>

                <div class="reactor-core">
                    <strong>AI</strong>
                    <small>CORE</small>
                </div>
            </div>

            <div class="ai-core-modules right mobile-hide">
                <a href="/ruta-aprendizaje-ai" class="ai-module">IA Generativa</a>
                <a href="/ruta-aprendizaje-ai" class="ai-module">Datos e IA</a>
                <a href="/ruta-aprendizaje-ai" class="ai-module">Impacto IA</a>
                <a href="/ruta-aprendizaje-ai" class="ai-module">Ética IA</a>
            </div>

        </div>

    </section>

<!-- =========================================
     AULÓPOLIS STELLAR CORE — NUEVA SECTION
========================================== -->
<section class="aulo-stellar-core-section cosmic">
    
    <div class="aulo-dimensional-field">

    <span class="dimensional-void"></span>

    <span class="nebula-cloud nebula-a"></span>
    <span class="nebula-cloud nebula-b"></span>
    <span class="nebula-cloud nebula-c"></span>

    <span class="stellar-dust dust-a"></span>
    <span class="stellar-dust dust-b"></span>

    <span class="deep-starfield stars-back"></span>
    <span class="deep-starfield stars-mid"></span>
    <span class="deep-starfield stars-front"></span>

    <span class="space-distortion-ring"></span>
    <span class="space-distortion-ring ring-2"></span>

    <span class="cosmic-noise-layer"></span>

</div>

    <div class="aulo-stellar-stage">

        <div class="aulo-stellar-reactor">

            <span class="stellar-deep-glow"></span>
            <span class="stellar-halo halo-one"></span>
            <span class="stellar-halo halo-two"></span>
            <span class="stellar-halo halo-three"></span>

            <span class="stellar-ring stellar-ring-a"></span>
            <span class="stellar-ring stellar-ring-b"></span>
            <span class="stellar-ring stellar-ring-c"></span>

            <span class="stellar-light-ray ray-one"></span>
            <span class="stellar-light-ray ray-two"></span>
            <span class="stellar-light-ray ray-three"></span>
            <span class="stellar-light-ray ray-four"></span>

            <span class="stellar-orbital-dot dot-one"></span>
            <span class="stellar-orbital-dot dot-two"></span>
            <span class="stellar-orbital-dot dot-three"></span>
            <span class="stellar-orbital-dot dot-four"></span>

            <div class="stellar-sphere">
                <span class="stellar-sphere-glass"></span>
                <span class="stellar-sphere-core"></span>
                <span class="stellar-sphere-shine"></span>
                <span class="stellar-sphere-flare"></span>
            </div>

            <span class="stellar-floor-light"></span>

        </div>

    </div>

</section>

<!-- =========================================
     AULÓPOLIS AI CORE2 UNIVERSE
========================================= -->

<!--<section class="aulo-ai-core-section">

    <div class="aulo-ai-bg-grid"></div>
    <div class="aulo-ai-orb aulo-ai-orb-one"></div>
    <div class="aulo-ai-orb aulo-ai-orb-two"></div>

    <div class="aulo-ai-container">

        <div class="aulo-ai-copy">

            <span class="aulo-ai-kicker">IA CORE</span>

            <h2>
                Genera imágenes con
                <span>inteligencia artificial</span>
            </h2>

            <p>
                Escribe una idea, selecciona un estilo visual y transforma tu prompt
                en tres conceptos gráficos dentro del universo Aulópolis.
            </p>

            <div class="aulo-ai-prompt-chips">
                <button type="button" data-prompt="Una ciudad futurista del conocimiento flotando en el espacio">
                    Ciudad futurista
                </button>

                <button type="button" data-prompt="Un robot tutor enseñando inteligencia artificial en una sala holográfica">
                    Robot tutor
                </button>

                <button type="button" data-prompt="Un planeta de aprendizaje con nodos luminosos y rutas de conocimiento">
                    Planeta aprendizaje
                </button>

                <button type="button" data-prompt="Un aula del futuro con pantallas holográficas y estudiantes digitales">
                    Aula del futuro
                </button>
            </div>

        </div>

        <div class="aulo-ai-generator">

            <div class="aulo-ai-panel">

                <div class="aulo-ai-panel-head">
                    <span>AULÓPOLIS</span>
                    <strong>IMAGE GENERATOR</strong>
                </div>

                <label>
                    Prompt creativo
                    <textarea id="auloAiPrompt" maxlength="220" placeholder="Ej: Una metrópolis de aprendizaje con luces neón, estudiantes y robots tutores..."></textarea>
                </label>

                <div class="aulo-ai-controls">

                    <label>
                        Estilo
                        <select id="auloAiStyle">
                            <option value="Cyberpunk">Cyberpunk</option>
                            <option value="Cinemático">Cinemático</option>
                            <option value="3D Render">3D Render</option>
                            <option value="Anime">Anime</option>
                            <option value="Realista">Realista</option>
                            <option value="Fantasía">Fantasía</option>
                            <option value="Educativo">Educativo</option>
                        </select>
                    </label>

                    <label>
                        Formato
                        <select id="auloAiFormat">
                            <option value="16:9">16:9</option>
                            <option value="1:1">1:1</option>
                            <option value="9:16">9:16</option>
                        </select>
                    </label>

                    <label>
                        Calidad
                        <select id="auloAiQuality">
                            <option value="Alta">Alta</option>
                            <option value="Ultra">Ultra</option>
                            <option value="Concept Art">Concept Art</option>
                        </select>
                    </label>

                </div>

                <div class="aulo-ai-actions">
                    <button type="button" class="aulo-ai-main-btn" id="auloAiGenerate">
                        GENERAR 3 IMÁGENES
                    </button>

                    <button type="button" class="aulo-ai-secondary-btn" id="auloAiRandom">
                        PROMPT RANDOM
                    </button>
                </div>

                <div class="aulo-ai-status" id="auloAiStatus">
                    SISTEMA LISTO
                </div>

            </div>

            <div class="aulo-ai-results" id="auloAiResults">

                <article class="aulo-ai-card aulo-ai-card-one">
                    <div class="aulo-ai-image">
                        <span>AI</span>
                    </div>

                    <div class="aulo-ai-card-info">
                        <strong>CONCEPTO 01</strong>
                        <p>Escribe un prompt y genera tu primera visión.</p>
                    </div>
                </article>

                <article class="aulo-ai-card aulo-ai-card-two">
                    <div class="aulo-ai-image">
                        <span>AI</span>
                    </div>

                    <div class="aulo-ai-card-info">
                        <strong>VARIACIÓN 02</strong>
                        <p>El sistema creará una segunda interpretación visual.</p>
                    </div>
                </article>

                <article class="aulo-ai-card aulo-ai-card-three">
                    <div class="aulo-ai-image">
                        <span>AI</span>
                    </div>

                    <div class="aulo-ai-card-info">
                        <strong>POSTER 03</strong>
                        <p>Una tercera versión con estética promocional.</p>
                    </div>
                </article>

            </div>

        </div>

    </div>

</section>
-->

<!-- =========================================
     AULÓPOLIS CODE UNIVERSE
========================================= 

<section class="code-core-cosmos mobile-hide">
    <canvas id="codeCoreCanvas"></canvas>

    <div class="code-core-content">
        <span>CODE CORE</span>
<h2 style="color:#7dd3fc; text-shadow:0 0 18px rgba(125,211,252,.45);">
    Programa el universo
</h2>        <p>Escribe una palabra y los nodos formarán estructuras vivas.</p>

        <div class="code-core-input">
            <input id="codeShapeInput" type="text" placeholder="ADN, red, constelación...">
            <button id="codeShapeBtn">Crear figura</button>
        </div>
        <div class="code-core-suggestions">
        
            
        </div>
        
        <br><br>
        <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Ingresa a Code Core
                <span>→</span>
            </a>
    </div>
</section>




<!-- =========================================
     AULÓPOLIS CYBER UNIVERSE2
========================================= 

<section class="cyber-threat-lab-section mobile-hide">

<div class="cyber-threat-grid">

    <div class="cyber-radar-panel">

        <div class="cyber-panel-title">
            <h3>Radar de amenazas</h3>
            <small id="cyberRadarStatus">Sistema en espera</small>
        </div>

        <div class="cyber-radar-screen">
            <canvas id="cyberThreatCanvas"></canvas>

            <div class="cyber-radar-core">
                <span>CORE</span>
            </div>
        </div>

        <div class="cyber-threat-actions">
            <button id="cyberScanBtn" type="button">
                Escanear red
            </button>

            <button id="cyberBlockBtn" type="button">
                Bloquear amenazas
            </button>

            <button id="cyberResetBtn" type="button">
                Reset
            </button>
        </div>

    </div>


    <div class="cyber-soc-panel">

        <div class="cyber-panel-title">
            <h3>Panel SOC</h3>
            <small>Security Operations Center</small>
        </div>

        <div class="cyber-soc-card">
            <span>Amenazas detectadas</span>
            <strong id="cyberThreatCount">0</strong>
        </div>

        <div class="cyber-soc-card">
            <span>Nivel de riesgo</span>
            <strong id="cyberRiskLevel">Bajo</strong>
        </div>

        <div class="cyber-soc-card">
            <span>Firewall</span>
            <strong id="cyberFirewallStatus">Activo</strong>
        </div>

        <div class="cyber-score-box">
            <div class="cyber-score-top">
                <span>Score de seguridad</span>
                <strong id="cyberSecurityScore">100%</strong>
            </div>

            <div class="cyber-score-bar">
                <div id="cyberSecurityBar"></div>
            </div>
        </div>

        <div class="cyber-lesson-box">
            <span id="cyberLessonType">Amenaza</span>
            <h4 id="cyberLessonTitle">Sistema protegido</h4>
            <p id="cyberLessonText">
                Presiona “Escanear red” para detectar amenazas y aprender cómo defender un sistema.
            </p>
        </div>

    </div>


    <div class="cyber-incident-box" id="cyberIncidentBox">

        <div class="cyber-incident-title">
            <span>INCIDENT RESPONSE</span>
            <strong id="cyberMissionStatus">Esperando incidente</strong>
        </div>

        <div class="cyber-log-console" id="cyberLogConsole">
            <p>[SYSTEM] SOC en espera de eventos...</p>
        </div>

        <div class="cyber-defense-options">
            <button type="button" data-defense="mfa">Activar MFA</button>
            <button type="button" data-defense="block-ip">Bloquear IP</button>
            <button type="button" data-defense="sanitize">Sanitizar inputs</button>
            <button type="button" data-defense="backup">Restaurar backup</button>
            <button type="button" data-defense="rate-limit">Rate limit</button>
            <button type="button" data-defense="isolate">Aislar equipo</button>
        </div>

        <div class="cyber-hardening-box">
            <h4>Checklist de hardening</h4>

            <label>
                <input type="checkbox" class="cyber-hardening-check" value="mfa">
                Activar autenticación multifactor
            </label>

            <label>
                <input type="checkbox" class="cyber-hardening-check" value="updates">
                Actualizar sistema y dependencias
            </label>

            <label>
                <input type="checkbox" class="cyber-hardening-check" value="logs">
                Revisar logs del incidente
            </label>

            <label>
                <input type="checkbox" class="cyber-hardening-check" value="backup">
                Verificar backup seguro
            </label>

            <label>
                <input type="checkbox" class="cyber-hardening-check" value="ports">
                Cerrar puertos innecesarios
            </label>
        </div>

    </div>

</div>

</section>


<!-- =========================================
     AULÓPOLIS CYBER UNIVERSE
========================================= 

<section class="cyber-core-section mobile-hide">

    <canvas id="cyberCoreCanvas"></canvas>

    <div class="cyber-core-content">

        <span class="cyber-core-tag">
            CYBER CORE
        </span>

        <h2>
            Defiende el universo digital
        </h2>

        <p>
            Explora amenazas, redes, vulnerabilidades y sistemas de defensa en tiempo real.
        </p>

        <div class="cyber-core-actions">

                <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Accede a Cyber Core
                <span>→</span>
            </a>

        </div>

    </div>

</section>

<!-- =========================================
     AULÓPOLIS DATA UNIVERSE
========================================= 

<section class="data-core-section mobile-hide">
    <div class="data-grid-bg"></div>

    <div class="data-core-container">

        <div class="data-core-left">
            <span class="data-kicker">AULÓPOLIS · DATA CORE</span>

            <h2>DATA CORE</h2>

            <p>
                Domina el lenguaje de los datos: Big Data, Data Science,
                Machine Learning y Business Intelligence trabajando juntos
                para transformar información en inteligencia estratégica.
            </p>

            <div class="data-metrics">
                <div>
                    <strong data-count="12.5">0</strong>
                    <span>TB procesados</span>
                </div>
                <div>
                    <strong data-count="98.4">0</strong>
                    <span>% precisión</span>
                </div>
                <div>
                    <strong data-count="2400">0</strong>
                    <span>K registros</span>
                </div>
            </div>
        </div>

        <div class="data-reactor">
            <div class="data-orbit orbit-one"></div>
            <div class="data-orbit orbit-two"></div>
            <div class="data-orbit orbit-three"></div>

            <span class="data-bit bit-1">SQL</span>
            <span class="data-bit bit-2">AI</span>
            <span class="data-bit bit-3">BI</span>
            <span class="data-bit bit-4">ML</span>

            <div class="data-core-orb">
                <span>DATA</span>
            </div>
        </div>

        <div class="data-cards">
            <div class="data-card">
                <div class="data-icon">▦</div>
                <h3>Big Data</h3>
                <p>Procesamiento masivo de información para detectar patrones y tendencias.</p>
            </div>

            <div class="data-card">
                <div class="data-icon">⌬</div>
                <h3>Data Science</h3>
                <p>Convierte datos complejos en conocimiento útil para tomar mejores decisiones.</p>
            </div>

            <div class="data-card">
                <div class="data-icon">◎</div>
                <h3>Machine Learning</h3>
                <p>Modelos capaces de aprender desde millones de registros y mejorar resultados.</p>
            </div>

            <div class="data-card">
                <div class="data-icon">⌁</div>
                <h3>Business Intelligence</h3>
                <p>Dashboards, indicadores y visualización avanzada para empresas e industrias.</p>
            </div>
        </div>

    </div>
</section>


<!-- =========================================
     AULÓPOLIS DATA UNIVERSE 2
========================================= 

<div class="data-live-lab mobile-hide">

    <div class="data-live-header">
        <span>DATA CORE · LIVE ANALYTICS</span>
        <h3>Simulador de datos en tiempo real</h3>
        <p>Ingresa valores separados por coma y observa cómo cambian los gráficos.</p>
    </div>

    <div class="data-input-box">
        <input 
            id="dataValuesInput" 
            type="text" 
            value="12, 28, 45, 32, 60, 48, 75"
            placeholder="Ej: 10, 25, 40, 60"
        >

        <button type="button" id="updateDataCharts">
            Actualizar datos
        </button>
    </div>

    <div class="data-chart-grid">
        <div class="data-chart-card">
            <h4>Gráfico de barras</h4>
            <canvas id="barChartCanvas"></canvas>
        </div>

        <div class="data-chart-card">
            <h4>Gráfico de líneas</h4>
            <canvas id="lineChartCanvas"></canvas>
        </div>
    </div>

        <br><br>
        <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Ingresa a Data Core
                <span>→</span>
            </a>
</div>


<!-- =========================================
     AULÓPOLIS DATA UNIVERSE 3
========================================= 

<section class="finance-core-section mobile-hide">
    <div class="finance-core-bg"></div>

    <div class="finance-core-container">

        <div class="finance-core-header">
            <span>FINANCE CORE · MARKET SIMULATOR</span>
            <h2>Simulador de Inversión</h2>
            <p>
                Compra y vende activos ficticios, construye un portafolio demo
                y aprende cómo se mueve el mercado sin arriesgar dinero real.
            </p>
        </div>

        <div class="finance-core-grid">

            <div class="finance-panel finance-market-panel">
                <div class="finance-panel-title">
                    <h3>Mercado demo</h3>
                    <small>Precios simulados</small>
                </div>

                <div id="financeAssetList" class="finance-asset-list"></div>
            </div>

            <div class="finance-panel finance-trade-panel">
                <div class="finance-panel-title">
                    <h3>Operación</h3>
                    <small>Compra / venta ficticia</small>
                </div>

                <div class="finance-selected">
                    <span id="financeSelectedType">ACCIÓN</span>
                    <h4 id="financeSelectedName">Apple</h4>
                    <strong id="financeSelectedPrice">$180.00</strong>
                </div>

                <label>Ingrese Cantidad de Acciones</label>
                <input id="financeQuantity" type="number" min="1" value="1">

                <div class="finance-trade-buttons">
                    <button id="financeBuyBtn" type="button">Comprar demo</button>
                    <button id="financeSellBtn" type="button">Vender demo</button>
                </div>

                <div id="financeMessage" class="finance-message">
                    Simulador educativo. No opera con dinero real.
                </div>
            </div>

            <div class="finance-panel finance-chart-panel">
                <div class="finance-panel-title">
                    <h3>Gráfico</h3>
                    <small id="financeChartLabel">Apple · tendencia simulada</small>
                </div>

                <canvas id="financeChartCanvas"></canvas>
            </div>

            <div class="finance-panel finance-portfolio-panel">
                <div class="finance-panel-title">
                    <h3>Portafolio demo</h3>
                    <small>Balance ficticio</small>
                </div>

                <div class="finance-balance-card">
                    <span>Saldo disponible</span>
                    <strong id="financeCash">$10,000.00</strong>
                </div>

                <div class="finance-balance-card">
                    <span>Valor portafolio</span>
                    <strong id="financePortfolioValue">$0.00</strong>
                </div>

                <div class="finance-balance-card">
                    <span>Resultado demo</span>
                    <strong id="financeProfitLoss">$0.00</strong>
                </div>

                <div id="financePortfolioList" class="finance-portfolio-list">
                    <p>No tienes activos en el portafolio.</p>
                </div>
            </div>

        </div>

        <div class="finance-core-disclaimer">
            Simulador educativo con dinero ficticio. No constituye recomendación financiera,
            asesoría de inversión ni intermediación de valores.
        </div>
        <br><br>
<a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Ingresa a Data Core - Market Lab
                <span>→</span>
            </a>
    </div>
</section>

<!-- =========================================
     AULÓPOLIS GAME UNIVERSE 
========================================= 

<section class="aulo-gamecore mobile-hide">
    <div class="aulo-gamecore__bg"></div>

    <div class="aulo-gamecore__wrap">

        <div class="aulo-arcade">
            <div class="aulo-arcade__marquee">
                AULÓPOLIS INVADERS
            </div>

            <div class="aulo-arcade__screen">
                <canvas id="auloInvadersCanvas"></canvas>
            </div>

            <div class="aulo-arcade__panel">
                <button id="auloMoveLeft" type="button">◀</button>
                <button id="auloShoot" type="button">●</button>
                <button id="auloMoveRight" type="button">▶</button>
            </div>
        </div>

        <div class="aulo-gamecore__content">
            <span>GAME CORE</span>
            <h2>ARCADE LEARNING</h2>

            <p>
                Defiende la red de conocimiento, elimina invasores digitales,
                gana puntos y supera misiones dentro del universo Aulópolis.
            </p>

            <div class="aulo-gamecore__actions">
                <button id="auloStartGame" type="button">JUGAR AHORA</button>
                <button id="auloPauseGame" type="button">PAUSAR</button>
            </div>

            <small>
                Controles: ← → para moverte · Espacio para disparar.
            </small>
        </div>
        <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Start Game Core
                <span>→</span>
            </a>
    </div>
</section>


<!-- =========================================
     AULÓPOLIS SOUND UNIVERSE 
========================================= 

<section class="aulo-sound-core-section mobile-hide">

    <div class="aulo-sound-bg-grid"></div>
    <div class="aulo-sound-glow aulo-sound-glow-one"></div>
    <div class="aulo-sound-glow aulo-sound-glow-two"></div>

    <div class="aulo-sound-container">

        <div class="aulo-sound-left">

            <span class="aulo-sound-kicker">SOUND CORE</span>

            <h2>
                Diseña tu propia
                <span>frecuencia</span>
            </h2>

            <p>
                Explora cómo el código puede convertirse en sonido.
                Activa notas, crea patrones, modifica el ritmo y genera
                melodías digitales dentro del universo Aulópolis.
            </p>

            <div class="aulo-sound-actions">
                <button type="button" class="aulo-sound-main-btn" id="auloSoundPlay">
                    INICIAR SECUENCIA
                </button>

                <button type="button" class="aulo-sound-secondary-btn" id="auloSoundStop">
                    DETENER
                </button>
            </div>

            <div class="aulo-sound-controls">

                <label>
                    BPM
                    <input type="range" id="auloSoundBpm" min="70" max="180" value="110">
                    <strong id="auloSoundBpmValue">110</strong>
                </label>

                <label>
                    ONDA
                    <select id="auloSoundWave">
                        <option value="sine">SINE</option>
                        <option value="square">SQUARE</option>
                        <option value="triangle">TRIANGLE</option>
                        <option value="sawtooth">SAW</option>
                    </select>
                </label>

            </div>

        </div>

        <div class="aulo-sound-console">

            <div class="aulo-sound-console-top">
                <div>
                    <span>AULÓPOLIS</span>
                    <strong>SYNTH CORE</strong>
                </div>

                <div class="aulo-sound-status" id="auloSoundStatus">
                    STANDBY
                </div>
            </div>

            <div class="aulo-sound-visualizer" id="auloSoundVisualizer">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

            <div class="aulo-sound-pad-title">
                MELODY GRID
            </div>

            <div class="aulo-sound-pads" id="auloSoundPads">

                <button type="button" data-note="261.63">DO</button>
                <button type="button" data-note="293.66">RE</button>
                <button type="button" data-note="329.63">MI</button>
                <button type="button" data-note="349.23">FA</button>
                <button type="button" data-note="392.00">SOL</button>
                <button type="button" data-note="440.00">LA</button>
                <button type="button" data-note="493.88">SI</button>
                <button type="button" data-note="523.25">DO+</button>

            </div>

            <div class="aulo-sound-pad-title">
                SEQUENCER
            </div>

            <div class="aulo-sound-sequencer" id="auloSoundSequencer">

                <button type="button" data-step="0"></button>
                <button type="button" data-step="1"></button>
                <button type="button" data-step="2"></button>
                <button type="button" data-step="3"></button>
                <button type="button" data-step="4"></button>
                <button type="button" data-step="5"></button>
                <button type="button" data-step="6"></button>
                <button type="button" data-step="7"></button>

            </div>

            <div class="aulo-sound-bottom-actions">
                <button type="button" id="auloSoundRandom">
                    GENERAR MELODÍA
                </button>

                <button type="button" id="auloSoundReset">
                    RESET
                </button>
            </div>

        </div>
        <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Play Sound Core
                <span>→</span>
            </a>
    </div>

</section>



<!-- =========================================
     AULÓPOLIS 3D UNIVERSE 
========================================= 
<section class="aulo-core3d-section mobile-hide">

    <div class="aulo-core3d-bg-grid"></div>
    <div class="aulo-core3d-orb aulo-core3d-orb-one"></div>
    <div class="aulo-core3d-orb aulo-core3d-orb-two"></div>

    <div class="aulo-core3d-container">

        <div class="aulo-core3d-copy">

            <span class="aulo-core3d-kicker">CORE 3D</span>

            <h2>
                Diseña tu propio
                <span>núcleo digital</span>
            </h2>

            <p>
                Construye una figura 3D en tiempo real. Cambia su forma,
                color, tamaño, material y rotación mientras exploras cómo
                el código transforma ideas en objetos visuales.
            </p>

            <div class="aulo-core3d-mini-stats">
                <div>
                    <strong>04</strong>
                    <span>Formas</span>
                </div>

                <div>
                    <strong>3D</strong>
                    <span>Canvas</span>
                </div>

                <div>
                    <strong>LIVE</strong>
                    <span>Render</span>
                </div>
            </div>

        </div>

        <div class="aulo-core3d-lab">

            <div class="aulo-core3d-viewer">

                <div class="aulo-core3d-viewer-top">
                    <span>AULÓPOLIS 3D ENGINE</span>
                    <strong id="core3dStatus">SPHERE MODE</strong>
                </div>

                <div class="aulo-core3d-canvas-wrap">
                    <canvas id="auloCore3DCanvas"></canvas>
                </div>

                <div class="aulo-core3d-viewer-bottom">
                    <span>Arrastra el mouse para mirar el objeto</span>
                    <span>Scroll para acercar</span>
                </div>

            </div>

            <div class="aulo-core3d-panel">

                <div class="aulo-core3d-panel-head">
                    <span>DESIGN PANEL</span>
                    <strong>Control de objeto</strong>
                </div>

                <label>
                    Forma
                    <select id="core3dShape">
                        <option value="sphere">Esfera</option>
                        <option value="box">Cubo</option>
                        <option value="torus">Toroide</option>
                        <option value="cone">Cono</option>
                    </select>
                </label>

                <label>
                    Color del núcleo
                    <input type="color" id="core3dColor" value="#22d3ee">
                </label>

                <label>
                    Tamaño
                    <input type="range" id="core3dSize" min="0.6" max="2.4" step="0.1" value="1.25">
                </label>

                <label>
                    Velocidad
                    <input type="range" id="core3dSpeed" min="0" max="0.06" step="0.005" value="0.015">
                </label>

                <label>
                    Intensidad de luz
                    <input type="range" id="core3dLight" min="0.5" max="3" step="0.1" value="1.6">
                </label>

                <div class="aulo-core3d-buttons">
                    <button type="button" id="core3dWireframe">
                        WIREFRAME
                    </button>

                    <button type="button" id="core3dRandom">
                        RANDOM
                    </button>

                    <button type="button" id="core3dReset">
                        RESET
                    </button>
                </div>

            </div>

        </div>
        <a href="/ruta-aprendizaje-ai" class="ai-core-btn">
                Ingresar a 3D Core
                <span>→</span>
            </a>
    </div>

</section>


<!-- =========================================
     AULÓPOLIS CREATOR UNIVERSE 
========================================= 

<section class="aulo-creator-core-section mobile-hide">

    <div class="aulo-creator-bg-grid"></div>
    <div class="aulo-creator-glow aulo-creator-glow-one"></div>
    <div class="aulo-creator-glow aulo-creator-glow-two"></div>

    <div class="aulo-creator-container">

        <div class="aulo-creator-copy">

            <span class="aulo-creator-kicker">CREATOR CORE</span>

            <h2>
                Edita tu primera
                <span>pieza audiovisual</span>
            </h2>

            <p>
                Experimenta con un mini estudio de edición. Carga un video,
                aplica filtros, ajusta color, agrega texto y visualiza tu línea
                de tiempo como en un software profesional.
            </p>

            <div class="aulo-creator-stats">
                <div>
                    <strong>VIDEO</strong>
                    <span>Preview</span>
                </div>

                <div>
                    <strong>FX</strong>
                    <span>Filtros</span>
                </div>

                <div>
                    <strong>LIVE</strong>
                    <span>Edición</span>
                </div>
            </div>
    
        </div>
    <a href="/ruta-aprendizaje-ai" class="ai-core-btn" style="width:600px">
                Ingresa a Creator Core
                <span>→</span>
            </a>
        <div class="aulo-video-editor">

            <div class="aulo-editor-topbar">

                <div>
                    <span>AULÓPOLIS</span>
                    <strong>VIDEO STUDIO</strong>
                </div>

                <div class="aulo-editor-status" id="auloEditorStatus">
                    READY
                </div>

            </div>

            <div class="aulo-editor-main">

                <div class="aulo-editor-preview">

                    <div class="aulo-video-screen">

                        <video id="auloEditorVideo" muted playsinline></video>

                        <div class="aulo-video-placeholder" id="auloVideoPlaceholder">
                            <span>▶</span>
                            <strong>CARGA UN VIDEO</strong>
                            <small>MP4, WEBM o MOV</small>
                        </div>

                        <div class="aulo-video-overlay-text" id="auloVideoOverlayText">
                            AULÓPOLIS CREATOR
                        </div>

                        <div class="aulo-video-rec-dot">
                            <i></i> PREVIEW
                        </div>

                    </div>

                    <div class="aulo-editor-timeline">

                        <div class="aulo-timeline-head">
                            <span>TIMELINE</span>
                            <strong id="auloEditorTime">00:00 / 00:00</strong>
                        </div>

                        <div class="aulo-timeline-track">
                            <div class="aulo-timeline-progress" id="auloTimelineProgress"></div>

                            <div class="aulo-clip clip-intro">
                                INTRO
                            </div>

                            <div class="aulo-clip clip-main">
                                CLIP 01
                            </div>

                            <div class="aulo-clip clip-fx">
                                FX
                            </div>

                            <div class="aulo-clip clip-text">
                                TEXTO
                            </div>

                            <div class="aulo-clip clip-outro">
                                OUTRO
                            </div>
                        </div>

                    </div>

                </div>

                <div class="aulo-editor-panel">

                    <div class="aulo-panel-block">

                        <span class="aulo-panel-title">MEDIA</span>

                        <label class="aulo-upload-btn">
                            CARGAR VIDEO
                            <input type="file" id="auloVideoInput" accept="video/*">
                        </label>

                    </div>

                    <div class="aulo-panel-block">

                        <span class="aulo-panel-title">PLAYBACK</span>

                        <div class="aulo-panel-buttons">
                            <button type="button" id="auloVideoPlay">PLAY</button>
                            <button type="button" id="auloVideoPause">PAUSE</button>
                            <button type="button" id="auloVideoReset">RESET</button>
                        </div>

                    </div>

                    <div class="aulo-panel-block">

                        <span class="aulo-panel-title">LOOK</span>

                        <select id="auloVideoFilter">
                            <option value="normal">Normal</option>
                            <option value="cinematic">Cinemático</option>
                            <option value="bw">Blanco y negro</option>
                            <option value="cyberpunk">Cyberpunk</option>
                            <option value="vintage">Vintage</option>
                            <option value="highcontrast">Alto contraste</option>
                        </select>

                    </div>

                    <div class="aulo-panel-block">

                        <span class="aulo-panel-title">AJUSTES</span>

                        <label>
                            Brillo
                            <input type="range" id="auloVideoBrightness" min="50" max="160" value="100">
                        </label>

                        <label>
                            Contraste
                            <input type="range" id="auloVideoContrast" min="50" max="190" value="100">
                        </label>

                        <label>
                            Saturación
                            <input type="range" id="auloVideoSaturation" min="0" max="220" value="100">
                        </label>

                        <label>
                            Blur
                            <input type="range" id="auloVideoBlur" min="0" max="8" value="0">
                        </label>

                    </div>

                    <div class="aulo-panel-block">

                        <span class="aulo-panel-title">TEXTO</span>

                        <input type="text" id="auloOverlayInput" value="AULÓPOLIS CREATOR" maxlength="32">

                    </div>

                    <button type="button" class="aulo-export-btn" id="auloExportBtn">
                        EXPORTAR PROYECTO
                    </button>

                </div>

            </div>

        </div>

    </div>

</section>

<!-- =========================================
     AULÓPOLIS ENTERPRISE LEARNING INTELLIGENCE
========================================= 
<section class="aulopolis-enterprise-section mobile-hide">

    <div class="enterprise-bg-orb orb-one"></div>
    <div class="enterprise-bg-orb orb-two"></div>

    <div class="enterprise-content">

        <span class="enterprise-kicker">
            AULÓPOLIS ENTERPRISE LEARNING INTELLIGENCE
        </span>

        <h2>Capacitación corporativa inteligente para equipos de alto desempeño</h2>

        <p class="enterprise-lead">
            Aulópolis permite a empresas diseñar rutas de aprendizaje personalizadas,
            medir el avance de sus equipos y transformar la capacitación interna en
            una experiencia gamificada, escalable y orientada a resultados.
        </p>

        <div class="enterprise-feature-list">

            <div class="enterprise-feature">
                <span>01</span>
                <div>
                    <h4>Rutas personalizadas por industria</h4>
                    <p>Nodos de aprendizaje adaptados a áreas como tecnología, ventas, operaciones, liderazgo, IA, seguridad, productividad y capacitación interna.</p>
                </div>
            </div>

            <div class="enterprise-feature">
                <span>02</span>
                <div>
                    <h4>Gamificación aplicada al aprendizaje</h4>
                    <p>Badges, ranking de usuarios, niveles de avance, rangos de escalamiento y progresión visual para aumentar la motivación y finalización.</p>
                </div>
            </div>

            <div class="enterprise-feature">
                <span>03</span>
                <div>
                    <h4>Paneles simples para empresas y usuarios</h4>
                    <p>Panel de administración, panel de estudiantes y panel de instructores con una experiencia familiar, clara y fácil de usar.</p>
                </div>
            </div>

        </div>

        <div class="enterprise-actions">
            <a href="/contact" class="enterprise-btn">
                Solicitar propuesta empresarial
                <span>→</span>
            </a>

            <div class="enterprise-trust-note">
                <strong>Ideal para:</strong>
                empresas, OTEC, áreas de RR.HH., capacitación, ventas y transformación digital.
            </div>
        </div>

    </div>

    <div class="enterprise-dashboard">

        <div class="dashboard-topbar">
            <div>
                <span class="dashboard-label">Corporate Learning Console</span>
                <h3>Panel ejecutivo de capacitación</h3>
            </div>

            <div class="dashboard-status">
                <span></span>
                Live analytics
            </div>
        </div>

        <div class="enterprise-metrics">

            <div class="enterprise-metric-card">
                <div class="metric-icon">👥</div>
                <div>
                    <span>Usuarios activos</span>
                    <strong data-count="1246">0</strong>
                </div>
            </div>

            <div class="enterprise-metric-card">
                <div class="metric-icon">⚡</div>
                <div>
                    <span>Progreso promedio</span>
                    <strong data-count="76" data-suffix="%">0%</strong>
                </div>
            </div>

            <div class="enterprise-metric-card">
                <div class="metric-icon">⬢</div>
                <div>
                    <span>Nodos personalizados</span>
                    <strong data-count="312">0</strong>
                </div>
            </div>

            <div class="enterprise-metric-card">
                <div class="metric-icon">🏅</div>
                <div>
                    <span>Badges entregados</span>
                    <strong data-count="2430">0</strong>
                </div>
            </div>

        </div>

        <div class="enterprise-panels-preview">

            <div class="panel-preview-card admin-preview">
                <div class="preview-header">
                    <span>Admin Panel</span>
                    <small>Empresa</small>
                </div>

                <div class="preview-row active">
                    <span>Ruta IA para equipos comerciales</span>
                    <strong>82%</strong>
                </div>

                <div class="preview-row">
                    <span>Programa Liderazgo Operacional</span>
                    <strong>64%</strong>
                </div>

                <div class="preview-row">
                    <span>Onboarding nuevos colaboradores</span>
                    <strong>91%</strong>
                </div>
            </div>

            <div class="panel-preview-card user-preview">
                <div class="preview-header">
                    <span>User Journey</span>
                    <small>Estudiante</small>
                </div>

                <div class="learning-path-line">
                    <div class="path-node completed">IA</div>
                    <div class="path-node completed">Data</div>
                    <div class="path-node active">Skill</div>
                    <div class="path-node">Cert</div>
                </div>

                <div class="rank-card">
                    <span>Ranking semanal</span>
                    <strong>#7</strong>
                    <small>Rango: Advanced Learner</small>
                </div>
            </div>

        </div>

        <div class="enterprise-charts">

            <div class="enterprise-chart-card enterprise-line-card">
                <div class="chart-header">
                    <div>
                        <h3>Progreso de aprendizaje</h3>
                        <span>Seguimiento por equipo, ruta y desempeño</span>
                    </div>
                    <em>+24%</em>
                </div>

                <canvas id="aulopolisLineChart"></canvas>
            </div>

            <div class="enterprise-chart-card enterprise-donut-card">
                <div class="chart-header">
                    <div>
                        <h3>Mapa de habilidades</h3>
                        <span>Distribución por competencia</span>
                    </div>
                </div>

                <div class="donut-layout">
                    <canvas id="aulopolisDonutChart"></canvas>

                    <div class="donut-legend">
                        <div><span style="--c:#8b5cf6"></span> IA</div>
                        <div><span style="--c:#22d3ee"></span> Data</div>
                        <div><span style="--c:#2563eb"></span> Desarrollo</div>
                        <div><span style="--c:#f59e0b"></span> Diseño</div>
                        <div><span style="--c:#10b981"></span> Negocio</div>
                    </div>
                </div>
            </div>

        </div>

        <div class="enterprise-bottom-strip">
            <div>
                <span>Learning paths</span>
                <strong>Personalizados</strong>
            </div>
            <div>
                <span>Ranking</span>
                <strong>Gamificado</strong>
            </div>
            <div>
                <span>Reportes</span>
                <strong>En tiempo real</strong>
            </div>
        </div>

    </div>

</section>-->

</div>
    
    <!--<div class="stats-container page-has-hero-section-2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box teacher">
                                <img src="/assets/default/img/stats/teacher.svg" alt="" class="img-fluid"/>
                            </div>
                            <strong class="stat-number mt-10">2</strong>
                            <strong class="stat-number mt-10">1.157</strong>
                            
                            <h4 class="stat-title">Competencias de los Instructores</h4>
                            <p class="stat-desc mt-10">Aprende directamente de instructores con amplia experiencia en la minería e industria, comprometidos con tu desarrollo profesional.</p>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box student">
                                <img src="/assets/default/img/stats/student.svg" alt="" class="img-fluid"/>
                            </div>
                           <!-- <strong class="stat-number mt-10">7</strong>
                            
                            <strong class="stat-number mt-10">57.795</strong>
                            
                            <h4 class="stat-title">Estudiantes en Aulopolis</h4>
                            <p class="stat-desc mt-10">Estudiantes que eligieron la excelencia: accediendo a formación de calidad, recursos innovadores y una experiencia de aprendizaje única.</p>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box video">
                                <img src="/assets/default/img/stats/video.svg" alt="" class="img-fluid"/>
                            </div>
                            <strong class="stat-number mt-10">0</strong>
                            <h4 class="stat-title">Webinars y Clases en vivo</h4>
                            <p class="stat-desc mt-10">Participa en sesiones en vivo con expertos, interactúa en tiempo real y fortalece tus habilidades con webinars diseñados para impulsar tu desarrollo profesional.</p>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3 mt-25 mt-lg-0">
                        <div class="stats-item d-flex flex-column align-items-center text-center py-30 px-5 w-100">
                            <div class="stat-icon-box course">
                                <img src="/assets/default/img/stats/course.svg" alt="" class="img-fluid"/>
                            </div>
                            <strong class="stat-number mt-10">9</strong>
                            <h4 class="stat-title">Cursos Online por Módulos</h4>
                            <p class="stat-desc mt-10">Capacitación diseñada por profesionales de la minería e industria, accesible 24/7 para que aprendas de los líderes del sector, donde y cuando quieras.</p>
                        </div>
                    </div>-->
                </div>
            </div>
        </div>
    
    
            <!--<footer class="footer bg-secondary position-relative user-select-none">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class=" footer-subscribe d-block d-md-flex align-items-center justify-content-between">
                    <div class="flex-grow-1">
                        <strong>Únete a nosotros</strong>
                        <span class="d-block mt-5 text-white">#Enviaremos las mejores ofertas a su correo electrónico.</span>
                    </div>
                    <div class="subscribe-input bg-white p-10 flex-grow-1 mt-30 mt-md-0">
                        <form action="/newsletters" method="post">
                            <input type="hidden" name="_token" value="xCnMFlSjn0R9WXa6oAOsV4MjRFbb1uhV3Mjsv45E">

                            <div class="form-group d-flex align-items-center m-0">
                                <div class="w-100">
                                    <input type="text" name="newsletter_email" class="form-control border-0 " placeholder="Introduzca su correo electrónico aquí"/>
                                                                    </div>
                                <button type="submit" class="btn btn-primary rounded-pill">Unirse</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>-->

    
<div class="container">
    <div class="row align-items-start">

        <div class="col-12 col-md-3 mb-30 mb-md-0">
            <a href="/" class="aulo-footer-brand-logo">
    <img src="/store/1/LOGO-AULOPOLIS-NEON.png"
         alt="Aulópolis"
         class="aulo-footer-logo">
</a>

        </div>

                    <div class="col-6 col-md-2">
                                                                        <span class="header d-block text-white font-weight-bold">Rutas de Aprendizaje</span>
                        
                                                    <div class="mt-20">
                                <p><a href="https://aulopolis.com/ruta-aprendizaje-ai" target="_blank"><font color="#ffffff">Ver Rutas de Aprendizaje</font></a><br></p>
                            </div>
                                                            </div>
                        <div class="col-6 col-md-2">
                                                                        <span class="header d-block text-white font-weight-bold">Nodos Destacados</span>
                        
                                                    <div class="mt-20">
                                <p><a href="https://aulopolis.com/" target="_blank"><font color="#ffffff">Ver Nodos</font></a><br></p>
                            </div>
                                                            </div>
                        <div class="col-6 col-md-2">
                                                                        <span class="header d-block text-white font-weight-bold">MarketPlace</span>
                        
                                                    <div class="mt-20">
                                <p><a href="https://aulopolis.com/public/products" target="_blank"><font color="#ffffff">Visitar MarketPlace</font></a><br></p><p></p>
                            </div>
                                                            </div>
                        <div class="col-6 col-md-2">
                                                                        <span class="header d-block text-white font-weight-bold">Contacto</span>
                        
                                                    <div class="mt-20">
                                <div class="footer-column-4">
    <p><a href="mailto:aulopolis@aulopolis.com" style=""><font color="#ffffff">aulopolis@aulopolis.com</font></a></p><p>
    </p>
</div>
                            </div>
                                                            </div>
            
        </div>

        <!--<div class="mt-40 border-blue py-25 d-flex align-items-center justify-content-between">
            <div class="footer-logo">
                <a href="/">
                                            <img src="/store/1/logo-aulopolis-blanco.png" class="img-cover" alt="footer logo">
                                    </a>
            </div>

            <div class="footer-social">
                                                            <a href="https://www.instagram.com/aulopolis_capacitaciones" target="_blank">
                            <img src="/store/1/default_images/social/instagram.svg" alt="Instagram" class="mr-15">
                        </a>
                                            <a href="https://cl.linkedin.com/" target="_blank">
                            <img src="/store/1/default_images/social/linkedin.svg" alt="Linkedin" class="mr-15">
                        </a>
                                            <a href="https://www.facebook.com/profile.php?id=61578063930130" target="_blank">
                            <img src="/store/1/default_images/social/facebook.svg" alt="Facebook" class="mr-15">
                        </a>
                                                </div>
        </div>
    </div>-->


<div class="aulo-footer-socials">

    
        
            <a href="https://www.instagram.com/aulopolis_capacitaciones"
               target="_blank"
               class="aulo-social-link"
               aria-label="Instagram">

                <span class="aulo-social-glow"></span>

                <img src="/store/1/default_images/social/instagram.svg"
                     alt="Instagram"
                     class="aulo-social-icon">

            </a>

        
            <a href="https://cl.linkedin.com/"
               target="_blank"
               class="aulo-social-link"
               aria-label="Linkedin">

                <span class="aulo-social-glow"></span>

                <img src="/store/1/default_images/social/linkedin.svg"
                     alt="Linkedin"
                     class="aulo-social-icon">

            </a>

        
            <a href="https://www.facebook.com/profile.php?id=61578063930130"
               target="_blank"
               class="aulo-social-link"
               aria-label="Facebook">

                <span class="aulo-social-glow"></span>

                <img src="/store/1/default_images/social/facebook.svg"
                     alt="Facebook"
                     class="aulo-social-icon">

            </a>

        
    
</div>

   <!--         <div class="footer-copyright-card">
            <div class="container d-flex align-items-center justify-content-between py-15">
                <div class="font-14 text-white">Todos los derechos reservados para la plataforma de gestión de aprendizaje</div>

                <div class="d-flex align-items-center justify-content-center">
                    
                                            <div class="border-left mx-5 mx-lg-15 h-100"></div>

                        <div class="d-flex align-items-center text-white font-14">
                            <i data-feather="mail" width="20" height="20" class="mr-10"></i>
                            contacto@aulopolis.com
                        </div>
                                    </div>
            </div>
        </div>
    -->

</footer>
    
    
    </div>
<!-- Template JS File -->
<script src="/assets/default/js/app.js"></script>
<script src="/assets/default/vendors/feather-icons/dist/feather.min.js"></script>
<script src="/assets/default/vendors/moment.min.js"></script>
<script src="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.js"></script>
<script src="/assets/default/vendors/toast/jquery.toast.min.js"></script>
<script type="text/javascript" src="/assets/default/vendors/simplebar/simplebar.min.js"></script>



<script>
    var deleteAlertTitle = '¿Estás seguro?';
    var deleteAlertHint = '¡Esta acción no se puede deshacer!';
    var deleteAlertConfirm = 'Eliminar';
    var deleteAlertCancel = 'Cancelar';
    var deleteAlertSuccess = 'Success';
    var deleteAlertFail = 'Fallido';
    var deleteAlertFailHint = '¡Error al eliminar el elemento!';
    var deleteAlertSuccessHint = 'Elemento eliminado correctamente.';
    var forbiddenRequestToastTitleLang = '&quot;FORBIDDEN&quot; Request';
    var forbiddenRequestToastMsgLang = 'You not access to this content.';
    var priceInvalidHintLang = 'update.price_invalid_hint';
</script>




<script>
document.addEventListener('DOMContentLoaded', function () {
    const section = document.querySelector('.aulopolis-enterprise-section');

    if (!section) return;

    /* ===============================
       COUNTERS
    =============================== */

    const counters = section.querySelectorAll('[data-count]');

    function animateCounters() {
        counters.forEach(counter => {
            const target = parseInt(counter.dataset.count, 10);
            const suffix = counter.dataset.suffix || '';
            const duration = 1500;
            const start = performance.now();

            function update(now) {
                const progress = Math.min((now - start) / duration, 1);
                const eased = 1 - Math.pow(1 - progress, 3);
                const value = Math.floor(target * eased);

                counter.textContent = value.toLocaleString('es-CL') + suffix;

                if (progress < 1) {
                    requestAnimationFrame(update);
                }
            }

            requestAnimationFrame(update);
        });
    }


    /* ===============================
       LINE CHART
    =============================== */

    const lineCanvas = document.getElementById('aulopolisLineChart');
    const lineCtx = lineCanvas ? lineCanvas.getContext('2d') : null;

    const lineData = [22, 42, 48, 48, 63, 71, 48, 39, 55, 58, 70, 76, 92];
    let lineProgress = 0;

    function setupCanvas(canvas, ctx) {
        const dpr = window.devicePixelRatio || 1;
        const rect = canvas.getBoundingClientRect();

        canvas.width = rect.width * dpr;
        canvas.height = rect.height * dpr;

        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function drawLineChart() {
        if (!lineCanvas || !lineCtx) return;

        setupCanvas(lineCanvas, lineCtx);

        const w = lineCanvas.getBoundingClientRect().width;
        const h = lineCanvas.getBoundingClientRect().height;
        const pad = 18;
        const chartW = w - pad * 2;
        const chartH = h - pad * 2;
        const max = 100;

        lineCtx.clearRect(0, 0, w, h);

        /* grid */
        lineCtx.strokeStyle = 'rgba(148, 163, 184, .10)';
        lineCtx.lineWidth = 1;

        for (let i = 0; i <= 4; i++) {
            const y = pad + (chartH / 4) * i;
            lineCtx.beginPath();
            lineCtx.moveTo(pad, y);
            lineCtx.lineTo(w - pad, y);
            lineCtx.stroke();
        }

        for (let i = 0; i <= 8; i++) {
            const x = pad + (chartW / 8) * i;
            lineCtx.beginPath();
            lineCtx.moveTo(x, pad);
            lineCtx.lineTo(x, h - pad);
            lineCtx.stroke();
        }

        const points = lineData.map((value, index) => {
            const x = pad + (chartW / (lineData.length - 1)) * index;
            const y = pad + chartH - (value / max) * chartH;
            return { x, y };
        });

        const visible = Math.max(2, Math.floor(points.length * lineProgress));

        /* glow line */
        lineCtx.beginPath();
        points.slice(0, visible).forEach((p, i) => {
            if (i === 0) lineCtx.moveTo(p.x, p.y);
            else lineCtx.lineTo(p.x, p.y);
        });

        lineCtx.strokeStyle = 'rgba(34, 211, 238, .18)';
        lineCtx.lineWidth = 9;
        lineCtx.shadowColor = 'rgba(34, 211, 238, .65)';
        lineCtx.shadowBlur = 18;
        lineCtx.stroke();

        /* main line */
        lineCtx.shadowBlur = 0;
        lineCtx.beginPath();
        points.slice(0, visible).forEach((p, i) => {
            if (i === 0) lineCtx.moveTo(p.x, p.y);
            else lineCtx.lineTo(p.x, p.y);
        });

        const gradient = lineCtx.createLinearGradient(0, 0, w, 0);
        gradient.addColorStop(0, '#22d3ee');
        gradient.addColorStop(.55, '#2563eb');
        gradient.addColorStop(1, '#7c3aed');

        lineCtx.strokeStyle = gradient;
        lineCtx.lineWidth = 3;
        lineCtx.stroke();

        /* dots */
        points.slice(0, visible).forEach(p => {
            lineCtx.beginPath();
            lineCtx.arc(p.x, p.y, 4, 0, Math.PI * 2);
            lineCtx.fillStyle = '#22d3ee';
            lineCtx.shadowColor = 'rgba(34,211,238,.85)';
            lineCtx.shadowBlur = 14;
            lineCtx.fill();
        });

        lineCtx.shadowBlur = 0;

        /* labels */
        const labels = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago'];
        lineCtx.fillStyle = 'rgba(226,232,240,.46)';
        lineCtx.font = '10px Inter, Arial';

        labels.forEach((label, i) => {
            const x = pad + (chartW / (labels.length - 1)) * i;
            lineCtx.fillText(label, x - 8, h - 4);
        });

        lineProgress += 0.018;

        if (lineProgress <= 1.02) {
            requestAnimationFrame(drawLineChart);
        }
    }


    /* ===============================
       DONUT CHART
    =============================== */

    const donutCanvas = document.getElementById('aulopolisDonutChart');
    const donutCtx = donutCanvas ? donutCanvas.getContext('2d') : null;

    const donutData = [
        { value: 24, color: '#7c3aed' },
        { value: 22, color: '#22d3ee' },
        { value: 20, color: '#2563eb' },
        { value: 18, color: '#f59e0b' },
        { value: 16, color: '#10b981' }
    ];

    let donutProgress = 0;

    function drawDonutChart() {
        if (!donutCanvas || !donutCtx) return;

        setupCanvas(donutCanvas, donutCtx);

        const w = donutCanvas.getBoundingClientRect().width;
        const h = donutCanvas.getBoundingClientRect().height;
        const cx = w / 2;
        const cy = h / 2;
        const radius = Math.min(w, h) / 2 - 10;
        const lineWidth = 24;
        const total = donutData.reduce((sum, item) => sum + item.value, 0);

        donutCtx.clearRect(0, 0, w, h);

        /* background ring */
        donutCtx.beginPath();
        donutCtx.arc(cx, cy, radius, 0, Math.PI * 2);
        donutCtx.strokeStyle = 'rgba(148,163,184,.12)';
        donutCtx.lineWidth = lineWidth;
        donutCtx.stroke();

        let startAngle = -Math.PI / 2;

        donutData.forEach(item => {
            const angle = (item.value / total) * Math.PI * 2 * donutProgress;

            donutCtx.beginPath();
            donutCtx.arc(cx, cy, radius, startAngle, startAngle + angle);
            donutCtx.strokeStyle = item.color;
            donutCtx.lineWidth = lineWidth;
            donutCtx.lineCap = 'round';
            donutCtx.shadowColor = item.color;
            donutCtx.shadowBlur = 12;
            donutCtx.stroke();

            startAngle += (item.value / total) * Math.PI * 2;
        });

        donutCtx.shadowBlur = 0;

        /* center */
        donutCtx.beginPath();
        donutCtx.arc(cx, cy, radius - lineWidth, 0, Math.PI * 2);
        donutCtx.fillStyle = 'rgba(2,8,23,.92)';
        donutCtx.fill();

        donutCtx.fillStyle = '#ffffff';
        donutCtx.font = '900 18px Inter, Arial';
        donutCtx.textAlign = 'center';
        donutCtx.fillText('76%', cx, cy + 4);

        donutCtx.fillStyle = 'rgba(103,232,249,.68)';
        donutCtx.font = '700 9px Inter, Arial';
        donutCtx.fillText('SKILLS', cx, cy + 20);

        donutProgress += 0.018;

        if (donutProgress <= 1.02) {
            requestAnimationFrame(drawDonutChart);
        }
    }


    /* ===============================
       OBSERVER
    =============================== */

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounters();
                lineProgress = 0;
                donutProgress = 0;
                drawLineChart();
                drawDonutChart();
                observer.disconnect();
            }
        });
    }, {
        threshold: .35
    });

    observer.observe(section);

    window.addEventListener('resize', function () {
        if (lineProgress > 1) drawLineChart();
        if (donutProgress > 1) drawDonutChart();
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const formations = [
        {
            name: "triangle",
            positions: {
                ".nexus-ai": ["18%", "62%"],
                ".nexus-code": ["31%", "54%"],
                ".nexus-data": ["31%", "70%"],
                ".nexus-cyber": ["45%", "48%"],
                ".nexus-game": ["45%", "76%"],
                ".nexus-sound": ["59%", "44%"],
                ".nexus-creator": ["59%", "80%"],
                ".nexus-3d": ["73%", "62%"]
            }
        },
        {
            name: "diamond",
            positions: {
                ".nexus-ai": ["14%", "62%"],
                ".nexus-code": ["28%", "50%"],
                ".nexus-data": ["28%", "74%"],
                ".nexus-cyber": ["45%", "44%"],
                ".nexus-game": ["45%", "80%"],
                ".nexus-sound": ["62%", "50%"],
                ".nexus-creator": ["62%", "74%"],
                ".nexus-3d": ["78%", "62%"]
            }
        },
        {
            name: "circle",
            positions: {
                ".nexus-ai": ["18%", "62%"],
                ".nexus-code": ["28%", "78%"],
                ".nexus-data": ["48%", "82%"],
                ".nexus-cyber": ["66%", "74%"],
                ".nexus-game": ["74%", "62%"],
                ".nexus-sound": ["66%", "50%"],
                ".nexus-creator": ["48%", "42%"],
                ".nexus-3d": ["28%", "46%"]
            }
        },
        {
            name: "line",
            positions: {
                ".nexus-ai": ["30%", "42%"],
                ".nexus-code": ["35%", "48%"],
                ".nexus-data": ["40%", "54%"],
                ".nexus-cyber": ["45%", "60%"],
                ".nexus-game": ["50%", "66%"],
                ".nexus-sound": ["55%", "72%"],
                ".nexus-creator": ["60%", "78%"],
                ".nexus-3d": ["65%", "84%"]
            }
        },
        {
            name: "constellation",
            positions: {
                ".nexus-ai": ["20%", "55%"],
                ".nexus-code": ["25%", "78%"],
                ".nexus-data": ["38%", "66%"],
                ".nexus-cyber": ["46%", "50%"],
                ".nexus-game": ["52%", "82%"],
                ".nexus-sound": ["64%", "58%"],
                ".nexus-creator": ["68%", "75%"],
                ".nexus-3d": ["76%", "62%"]
            }
        }
    ];

    /* =========================================================================
       🧬 INYECTOR MATRICIAL AUTOMÁTICO (Letras, Signos, Geometrías y Caracteres)
       ========================================================================= */
    const nexusNodes = [
        ".nexus-ai", ".nexus-code", ".nexus-data", ".nexus-cyber", 
        ".nexus-game", ".nexus-sound", ".nexus-creator", ".nexus-3d"
    ];

    const matrixTemplates = {
        // Letras Occidentales
        "letter-a": [[50,20], [40,40], [60,40], [30,60], [70,60], [40,60], [60,60], [50,80]],
        "letter-w": [[20,20], [80,20], [35,50], [65,50], [50,70], [30,80], [70,80], [50,40]],
        "letter-x": [[20,20], [80,20], [35,35], [65,35], [50,50], [35,65], [65,65], [20,80]],
        "letter-z": [[20,20], [40,20], [60,20], [80,20], [60,40], [40,60], [20,80], [80,80]],
        "letter-m": [[20,80], [20,40], [35,50], [50,60], [65,50], [80,40], [80,80], [50,30]],
        "letter-y": [[20,20], [80,20], [35,38], [65,38], [50,52], [50,66], [50,80], [50,90]],

        // Signos de Interrogación y Exclamación
        "sign-exclamation": [[50,15], [50,28], [50,41], [50,54], [50,67], [50,85], [49,85], [51,85]],
        "sign-interrogation": [[35,25], [50,15], [65,25], [60,40], [50,52], [50,66], [50,85], [49,85]],

        // Orientales (Kanji / Hanzi)
        "kanji-person": [[50,20], [45,38], [55,38], [35,60], [65,60], [20,85], [80,85], [50,50]],
        "kanji-mountain": [[50,20], [50,50], [50,80], [20,50], [80,50], [20,80], [80,80], [50,80]],
        "kanji-sun": [[30,20], [70,20], [30,50], [70,50], [30,80], [70,80], [50,50], [50,20]],
        "kanji-moon": [[40,15], [65,15], [35,45], [65,45], [30,75], [60,75], [25,90], [50,45]],
        "kanji-star": [[50,15], [25,45], [75,45], [50,45], [35,75], [65,75], [20,90], [80,90]],
        "kanji-gate": [[25,20], [75,20], [25,50], [75,50], [25,85], [75,85], [40,20], [60,20]],

        // Árabes
        "arabic-alif": [[50,15], [50,25], [50,35], [50,45], [50,55], [50,65], [50,75], [52,85]],
        "arabic-ba": [[20,60], [35,70], [50,71], [65,70], [80,60], [50,88], [49,88], [51,88]],
        "arabic-mim": [[45,30], [55,30], [55,45], [45,45], [40,60], [35,75], [30,90], [50,37]],

        // Geometrías Complejas
        "geo-hexagon": [[50,15], [78,30], [78,66], [50,85], [22,66], [22,30], [50,35], [50,65]],
        "geo-pentagon": [[50,15], [80,40], [68,78], [32,78], [20,40], [50,45], [40,60], [60,60]],
        "geo-infinity": [[35,35], [20,50], [35,65], [50,50], [65,35], [80,50], [65,65], [50,50]],
        "geo-cross": [[50,15], [50,36], [20,50], [38,50], [62,50], [80,50], [50,68], [50,88]],
        "geo-hourglass": [[20,20], [80,20], [38,38], [62,38], [50,50], [35,68], [65,68], [25,85]],
        "geo-spiral": [[50,50], [58,45], [62,58], [48,65], [35,52], [42,32], [65,25], [75,55]]
    };

    // Mapear plantillas estáticas al array
    Object.keys(matrixTemplates).forEach(key => {
        const formationObj = { name: key, positions: {} };
        matrixTemplates[key].forEach((coord, index) => {
            formationObj.positions[nexusNodes[index]] = [`${coord[0]}%`, `${coord[1]}%`];
        });
        formations.push(formationObj);
    });

    // 1. Añadir 25 Constelaciones Estelares Algorítmicas
    for (let i = 1; i <= 25; i++) {
        const formationObj = { name: `nebula-constellation-${i}`, positions: {} };
        nexusNodes.forEach((node, index) => {
            const x = Math.floor(Math.sin(index + i) * 30) + 50;
            const y = Math.floor(Math.cos(index * i) * 30) + 50;
            formationObj.positions[node] = [`${x}%`, `${y}%`];
        });
        formations.push(formationObj);
    }

    // 2. Añadir 20 Ondas de Frecuencia Cuánticas
    for (let i = 1; i <= 20; i++) {
        const formationObj = { name: `quantum-wave-${i}`, positions: {} };
        const amplitude = 15 + (i % 3) * 5;
        nexusNodes.forEach((node, index) => {
            const x = 15 + index * 10;
            const y = Math.floor(50 + Math.sin((index + i) * 0.8) * amplitude);
            formationObj.positions[node] = [`${x}%`, `${y}%`];
        });
        formations.push(formationObj);
    }

    // 3. Añadir 20 Órbitas Elípticas Variables
    for (let i = 1; i <= 20; i++) {
        const formationObj = { name: `elliptic-orbit-${i}`, positions: {} };
        const rx = 35 - (i % 4) * 3;
        const ry = 15 + (i % 4) * 4;
        nexusNodes.forEach((node, index) => {
            const angle = (index / 8) * Math.PI * 2 + (i * 0.2);
            const x = Math.floor(50 + Math.cos(angle) * rx);
            const y = Math.floor(50 + Math.sin(angle) * ry);
            formationObj.positions[node] = [`${x}%`, `${y}%`];
        });
        formations.push(formationObj);
    }

    // 4. Añadir 15 Caleidoscopios Simétricos Axiales
    for (let i = 1; i <= 15; i++) {
        const formationObj = { name: `kaleidoscope-symmetry-${i}`, positions: {} };
        const offset = (i * 3) % 20;
        const coords = [
            [30+offset, 30], [70-offset, 30], [30, 45+offset], [70, 45+offset],
            [30+offset, 70], [70-offset, 70], [50, 20+offset], [50, 80-offset]
        ];
        nexusNodes.forEach((node, index) => {
            formationObj.positions[node] = [`${coords[index][0]}%`, `${coords[index][1]}%`];
        });
        formations.push(formationObj);
    }

    /* =========================================================================
       🎮 CONTROL DEL FLUJO Y LOGICA DE RENDERIZADO
       ========================================================================= */
    const map = document.querySelector(".aulopolis-nexus-map");

    if (!map) return;

    let index = 0;

    function applyFormation(formation) {
        Object.entries(formation.positions).forEach(([selector, pos]) => {
            const node = document.querySelector(selector);

            if (!node) return;

            node.style.top = pos[0];
            node.style.left = pos[1];
        });
    }

    // Arrancar con la primera formación
    applyFormation(formations[0]);

    // Bucle infinito con las 100+ figuras cargadas
    setInterval(() => {
        index = (index + 1) % formations.length;
        applyFormation(formations[index]);
    }, 2000);

});
</script>

<style>
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-10px); }
        40%, 80% { transform: translateX(10px); }
    }
    .shake-animation { animation: shake 0.4s; }
</style>

		<script type='text/javascript' id='asp-1442fdeb-js-before'>if ( typeof window.ASP == 'undefined') { window.ASP = {wp_rocket_exception: "DOMContentLoaded", ajaxurl: "https:\/\/www.sliderrevolution.com\/wp-admin\/admin-ajax.php", backend_ajaxurl: "https:\/\/www.sliderrevolution.com\/wp-admin\/admin-ajax.php", asp_url: "https:\/\/www.sliderrevolution.com\/wp-content\/plugins\/ajax-search-pro\/", upload_url: "https:\/\/www.sliderrevolution.com\/wp-content\/uploads\/asp_upload\/", detect_ajax: 0, media_query: "MGpYJC", version: 5060, pageHTML: "", additional_scripts: [{"handle":"wd-asp-ajaxsearchpro","path":"\/kunden\/284747_51491\/webseiten\/plugins\/sliderrevolution\/wp-content\/plugins\/ajax-search-pro\/js\/min\/plugin\/merged\/asp.js","src":"https:\/\/www.sliderrevolution.com\/wp-content\/plugins\/ajax-search-pro\/js\/min\/plugin\/merged\/asp.js","prereq":false}], script_async_load: false, font_url: "https:\/\/www.sliderrevolution.com\/wp-content\/plugins\/ajax-search-pro\/css\/fonts\/icons\/icons2.woff2", init_only_in_viewport: true, highlight: {"enabled":false,"data":[]}, debug: false, instances: {}, analytics: {"method":"event","tracking_id":"","event":{"focus":{"active":1,"action":"focus","category":"ASP {search_id} | {search_name}","label":"Input focus","value":"1"},"search_start":{"active":0,"action":"search_start","category":"ASP {search_id} | {search_name}","label":"Phrase: {phrase}","value":"1"},"search_end":{"active":1,"action":"search_end","category":"ASP {search_id} | {search_name}","label":"{phrase} | {results_count}","value":"1"},"magnifier":{"active":1,"action":"magnifier","category":"ASP {search_id} | {search_name}","label":"Magnifier clicked","value":"1"},"return":{"active":1,"action":"return","category":"ASP {search_id} | {search_name}","label":"Return button pressed","value":"1"},"try_this":{"active":1,"action":"try_this","category":"ASP {search_id} | {search_name}","label":"Try this click | {phrase}","value":"1"},"facet_change":{"active":0,"action":"facet_change","category":"ASP {search_id} | {search_name}","label":"{option_label} | {option_value}","value":"1"},"result_click":{"active":1,"action":"result_click","category":"ASP {search_id} | {search_name}","label":"{result_title} | {result_url}","value":"1"}}}}};</script>
			<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/","url":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/","name":"Neon WordPress Slider With Text - Slider Revolution Template","isPartOf":{"@id":"https://www.sliderrevolution.com/#website"},"primaryImageOfPage":{"@id":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/#primaryimage"},"image":{"@id":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/#primaryimage"},"thumbnailUrl":"https://www.sliderrevolution.com/wp-content/uploads/2022/10/preview-3.jpg","datePublished":"2022-10-06T09:57:11+00:00","dateModified":"2023-06-23T04:57:42+00:00","description":"If you are still looking for a unique WordPress slider with text navigation, this template might be what you're looking for!","breadcrumb":{"@id":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/#primaryimage","url":"https://www.sliderrevolution.com/wp-content/uploads/2022/10/preview-3.jpg","contentUrl":"https://www.sliderrevolution.com/wp-content/uploads/2022/10/preview-3.jpg","width":640,"height":360},{"@type":"BreadcrumbList","@id":"https://www.sliderrevolution.com/templates/neon-wordpress-slider-with-text/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.sliderrevolution.com/"},{"@type":"ListItem","position":2,"name":"Neon WordPress Slider With Text"}]},{"@type":"WebSite","@id":"https://www.sliderrevolution.com/#website","url":"https://www.sliderrevolution.com/","name":"Slider Revolution","description":"More than just a WordPress slider","publisher":{"@id":"https://www.sliderrevolution.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.sliderrevolution.com/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.sliderrevolution.com/#organization","name":"Slider Revolution","url":"https://www.sliderrevolution.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.sliderrevolution.com/#/schema/logo/image/","url":"https://www.sliderrevolution.com/wp-content/uploads/2020/09/SRlogo_large.png","contentUrl":"https://www.sliderrevolution.com/wp-content/uploads/2020/09/SRlogo_large.png","width":320,"height":320,"caption":"Slider Revolution"},"image":{"@id":"https://www.sliderrevolution.com/#/schema/logo/image/"}}]}</script>
			<script data-minify="1" type='text/javascript' src='../../wp-content/cache/min/1/wp-content/plugins/lordicon-interactive-icons/dist/element71a3.js?ver=1696963304' id='lordicon-element-js-js'></script>
<script type='text/javascript' src='../../wp-includes/js/jquery/jquery.min3088.js?ver=3.7.0' id='jquery-core-js'></script>
<script type='text/javascript' src='../../wp-includes/js/jquery/jquery-migrate.min5589.js?ver=3.4.1' id='jquery-migrate-js'></script>
<script type='text/javascript' id='cookie-law-info-js-extra'>
/* <![CDATA[ */
var Cli_Data = {"nn_cookie_ids":["player","ugid","YSC","_ga","_gid","vuid","__cf_bm","test_cookie","IDE","NID","IR_gbd","viewed_cookie_policy","__cfruid","PHPSESSID","VISITOR_INFO1_LIVE","_gat_gtag_UA_168695135_1","CONSENT","codepen_session","gdurlcomSession","persist_prefs","__cfduid","IR_12644"],"non_necessary_cookies":{"necessary":["viewed_cookie_policy","cookielawinfo-checkbox-necessary","cookielawinfo-checkbox-non-necessary","__cfruid","PHPSESSID","__cfduid"],"others":["_gat_gtag_UA_168695135_1","CONSENT","codepen_session","gdurlcomSession","persist_prefs","IR_12644"],"advertisement":["test_cookie","IDE","NID","VISITOR_INFO1_LIVE"],"analytics":["_ga","_gid","vuid","IR_gbd"],"functional":["player","ugid","__cf_bm"],"performance":["YSC"]},"cookielist":{"necessary":{"id":4499,"status":true,"priority":0,"title":"Necessary","strict":true,"default_state":false,"ccpa_optout":false,"loadonstart":false},"others":{"id":4498,"status":true,"priority":0,"title":"Others","strict":false,"default_state":false,"ccpa_optout":false,"loadonstart":false},"advertisement":{"id":4500,"status":true,"priority":0,"title":"Advertisement","strict":false,"default_state":false,"ccpa_optout":false,"loadonstart":false},"analytics":{"id":4501,"status":true,"priority":0,"title":"Analytics","strict":false,"default_state":false,"ccpa_optout":false,"loadonstart":false},"functional":{"id":4502,"status":true,"priority":0,"title":"Functional","strict":false,"default_state":false,"ccpa_optout":false,"loadonstart":false},"performance":{"id":4503,"status":true,"priority":0,"title":"Performance","strict":false,"default_state":false,"ccpa_optout":false,"loadonstart":false}},"ajax_url":"https:\/\/www.sliderrevolution.com\/wp-admin\/admin-ajax.php","current_lang":"en","security":"84dc00f3b3","eu_countries":["GB"],"geoIP":"enabled","use_custom_geolocation_api":"1","custom_geolocation_api":"https:\/\/geoip.cookieyes.com\/geoip\/checker\/result.php","consentVersion":"1","strictlyEnabled":["necessary","obligatoire"],"cookieDomain":"","privacy_length":"250","ccpaEnabled":"","ccpaRegionBased":"","ccpaBarEnabled":"","ccpaType":"gdpr","triggerDomRefresh":"","secure_cookies":""};
var log_object = {"ajax_url":"https:\/\/www.sliderrevolution.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script data-minify="1" type='text/javascript' src='../../wp-content/cache/min/1/wp-content/plugins/webtoffee-gdpr-cookie-consent/public/js/cookie-law-info-public71a3.js?ver=1696963304' id='cookie-law-info-js'></script>
		<!-- Global site tag (gtag.js) - Google Analytics - Account -->
		<!-- Google tag (gtag.js) -->
		<script type="text/plain" data-cli-class="cli-blocker-script" data-cli-label="Google Tag Manager"  data-cli-script-type="analytics" data-cli-block="true" data-cli-block-if-ccpa-optout="false" data-cli-element-position="head" async src="https://www.googletagmanager.com/gtag/js?id=G-B9KTVHW30V"></script>
		<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		//gtag('config', 'G-B9KTVHW30V');
		gtag('config', 'G-B9KTVHW30V', {
				'linker': {
				'domains': ['https://account.sliderrevolution.com']
				}
			});
		</script>

		<!-- Google Tag Manager -->
		<script type="text/plain" data-cli-class="cli-blocker-script" data-cli-label="Google Tag Manager"  data-cli-script-type="analytics" data-cli-block="true" data-cli-block-if-ccpa-optout="false" data-cli-element-position="head">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
		'../../../www.googletagmanager.com/gtm5445.html?id='+i+dl;f.parentNode.insertBefore(j,f);
		})(window,document,'script','dataLayer','GTM-T9ZF6CG');</script>
		<!-- End Google Tag Manager -->

      <noscript><style>.lazyload { display: none; } .lazyload[class*="lazy-loader-background-element-"] { display: block; opacity: 1; }</style></noscript>
<script type="text/javascript"> (function(a,b,c,d,e,f,g){e['ire_o']=c;e[c]=e[c]||function(){(e[c].a=e[c].a||[]).push(arguments)};f=d.createElement(b);g=d.getElementsByTagName(b)[0];f.async=1;f.src=a;g.parentNode.insertBefore(f,g);})('../../../d.impactradius-event.com/A2559068-91e7-45ee-a82f-39239d736b041.js','script','ire',document,window);</script>
<script async defer src="../../../tools.luckyorange.com/core/lo98ce.js?site-id=138ff5ed"></script><script id="profitwell-js" data-pw-auth="1dae9ae90d95a7608b4d860a8d5bb802">
	(function(i,s,o,g,r,a,m){i[o]=i[o]||function(){(i[o].q=i[o].q||[]).push(arguments)};
	a=s.createElement(g);m=s.getElementsByTagName(g)[0];a.async=1;a.src=r+'?auth='+
	s.getElementById(o+'-js').getAttribute('data-pw-auth');m.parentNode.insertBefore(a,m);
	})(window,document,'profitwell','script','../../../public.profitwell.com/js/profitwell.js');

	profitwell('start', {});
</script>
<script>function setREVStartSize(e){
			//window.requestAnimationFrame(function() {
				window.RSIW = window.RSIW===undefined ? window.innerWidth : window.RSIW;
				window.RSIH = window.RSIH===undefined ? window.innerHeight : window.RSIH;
				try {
					var pw = document.getElementById(e.c).parentNode.offsetWidth,
						newh;
					pw = pw===0 || isNaN(pw) || (e.l=="fullwidth" || e.layout=="fullwidth") ? window.RSIW : pw;
					e.tabw = e.tabw===undefined ? 0 : parseInt(e.tabw);
					e.thumbw = e.thumbw===undefined ? 0 : parseInt(e.thumbw);
					e.tabh = e.tabh===undefined ? 0 : parseInt(e.tabh);
					e.thumbh = e.thumbh===undefined ? 0 : parseInt(e.thumbh);
					e.tabhide = e.tabhide===undefined ? 0 : parseInt(e.tabhide);
					e.thumbhide = e.thumbhide===undefined ? 0 : parseInt(e.thumbhide);
					e.mh = e.mh===undefined || e.mh=="" || e.mh==="auto" ? 0 : parseInt(e.mh,0);
					if(e.layout==="fullscreen" || e.l==="fullscreen")
						newh = Math.max(e.mh,window.RSIH);
					else{
						e.gw = Array.isArray(e.gw) ? e.gw : [e.gw];
						for (var i in e.rl) if (e.gw[i]===undefined || e.gw[i]===0) e.gw[i] = e.gw[i-1];
						e.gh = e.el===undefined || e.el==="" || (Array.isArray(e.el) && e.el.length==0)? e.gh : e.el;
						e.gh = Array.isArray(e.gh) ? e.gh : [e.gh];
						for (var i in e.rl) if (e.gh[i]===undefined || e.gh[i]===0) e.gh[i] = e.gh[i-1];
											
						var nl = new Array(e.rl.length),
							ix = 0,
							sl;
						e.tabw = e.tabhide>=pw ? 0 : e.tabw;
						e.thumbw = e.thumbhide>=pw ? 0 : e.thumbw;
						e.tabh = e.tabhide>=pw ? 0 : e.tabh;
						e.thumbh = e.thumbhide>=pw ? 0 : e.thumbh;
						for (var i in e.rl) nl[i] = e.rl[i]<window.RSIW ? 0 : e.rl[i];
						sl = nl[0];
						for (var i in nl) if (sl>nl[i] && nl[i]>0) { sl = nl[i]; ix=i;}
						var m = pw>(e.gw[ix]+e.tabw+e.thumbw) ? 1 : (pw-(e.tabw+e.thumbw)) / (e.gw[ix]);
						newh =  (e.gh[ix] * m) + (e.tabh + e.thumbh);
					}
					var el = document.getElementById(e.c);
					if (el!==null && el) el.style.height = newh+"px";
					el = document.getElementById(e.c+"_wrapper");
					if (el!==null && el) {
						el.style.height = newh+"px";
						el.style.display = "block";
					}
				} catch(e){
					console.log("Failure at Presize of Slider:" + e)
				}
			//});
		  };</script>
		  
		  <script>
document.addEventListener("DOMContentLoaded", function () {

    const cards = document.querySelectorAll(".hero-routes .route-card");

    if (!cards.length) return;

    const backdrop = document.createElement("div");
    backdrop.className = "aulo-card-cinema-backdrop";

    const particles = document.createElement("div");
    particles.className = "aulo-card-cinema-particles";

    const viewer = document.createElement("div");
    viewer.className = "aulo-card-cinema-viewer";

    document.body.appendChild(backdrop);
    document.body.appendChild(particles);
    document.body.appendChild(viewer);

    let closeTimer = null;

    function openCinema(card) {
        if (window.innerWidth < 992) return;

        clearTimeout(closeTimer);

        const clone = card.cloneNode(true);

        clone.removeAttribute("href");
        clone.setAttribute("aria-hidden", "true");

        viewer.innerHTML = "";
        viewer.appendChild(clone);

        backdrop.classList.add("show");
        particles.classList.add("show");

        requestAnimationFrame(function () {
            viewer.classList.add("show");
        });
    }

    function closeCinema() {
        viewer.classList.remove("show");
        backdrop.classList.remove("show");
        particles.classList.remove("show");

        closeTimer = setTimeout(function () {
            viewer.innerHTML = "";
        }, 420);
    }

    cards.forEach(function (card) {

        card.addEventListener("mouseenter", function () {
            openCinema(card);
        });

        card.addEventListener("mouseleave", function () {
            closeCinema();
        });

        card.addEventListener("focus", function () {
            openCinema(card);
        });

        card.addEventListener("blur", function () {
            closeCinema();
        });

    });

});
</script>
<script>
/* =====================================================
   AULOPOLIS DOMAIN GUARD — EARLY LOAD / NO FLICKER
===================================================== */

(function () {

    var host = window.location.hostname.replace(/^www\./, '');

    /*
    Clase temporal para bloquear animaciones durante el arranque.
    */
    document.documentElement.classList.add('aulo-booting');

    /*
    ESTA CLASE SE MANTIENE.
    No la eliminamos porque los popups/hover dependen de ella.
    */
    if (host === 'aulopolis.com') {
        document.documentElement.classList.add('aulo-host-aulopolis');
    }

})();
</script>



 <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>
<script src="/assets/default/vendors/owl-carousel2/owl.carousel.min.js"></script>
<script src="/assets/default/vendors/parallax/parallax.min.js"></script>
<script src="/assets/default/js/parts/home.min.js"></script>

<script src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider/public/assets/js/rbtools.min4261.js"></script>
<script src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider/public/assets/js/rs6.min4261.js"></script>
<script src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider/public/assets/js/libs/three.min4261.js"></script>
<script src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider-transitionpack-addon/public/assets/js/revolution.addon.transitionpack.min0ba6.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="/public/assets/default/js/aulopolis-unified.js?v=1.0.1" defer></script>

    <script id="rs-initialisation-scripts">
		var	tpj = jQuery;

		var	revapi1307,revapi1211,revapi4;

		if(window.RS_MODULES === undefined) window.RS_MODULES = {};
		if(RS_MODULES.modules === undefined) RS_MODULES.modules = {};
		RS_MODULES.modules["revslider13071"] = {once: RS_MODULES.modules["revslider13071"]!==undefined ? RS_MODULES.modules["revslider13071"].once : undefined, init:function() {
			window.revapi1307 = window.revapi1307===undefined || window.revapi1307===null || window.revapi1307.length===0  ? document.getElementById("rev_slider_1307_1") : window.revapi1307;
			if(window.revapi1307 === null || window.revapi1307 === undefined || window.revapi1307.length==0) { window.revapi1307initTry = window.revapi1307initTry ===undefined ? 0 : window.revapi1307initTry+1; if (window.revapi1307initTry<20) requestAnimationFrame(function() {RS_MODULES.modules["revslider13071"].init()}); return;}
			window.revapi1307 = jQuery(window.revapi1307);
			if(window.revapi1307.revolution==undefined){ revslider_showDoubleJqueryError("rev_slider_1307_1"); return;}
			revapi1307.revolutionInit({
					revapi:"revapi1307",
					DPR:"dpr",
					sliderLayout:"fullscreen",
					visibilityLevels:"1500,1240,778,480",
					gridwidth:"1240,1024,778,480",
					gridheight:"800,700,500,500",
					lazyType:"smart",
					perspective:600,
					perspectiveType:"global",
					lazyloaddata:"lazy-src",
					lazyOnBg:true,
					editorheight:"800,700,500,500",
					responsiveLevels:"1500,1240,778,480",
					fullScreenOffsetContainer:"#masthead",
					progressBar: {
						color:"rgba(255,255,255,0.3)",
						vertical:"top",
						size:5,
						reset:"animate"
						},
					navigation: {
						wheelCallDelay:1000,
						onHoverStop:false,
						touch: {
							touchenabled:true
						},
						arrows: {
							enable:true,
							style:"uranus",
							hide_over:"777px",
							left: {
								h_align:"right",
								v_align:"bottom",
								h_offset:60,
								v_offset:40
							},
							right: {
								v_align:"bottom",
								h_offset:10,
								v_offset:40
							}
						},
						tabs: {
							enable:true,
tmp:"<div class=\"tp-tab-content\">  <span class=\"tp-tab-date\">{{param1}}</span>  <span class=\"tp-tab-title\">{{title}}</span></div><div class=\"tp-tab-image\"></div>",
							style:"cyber_tabs",
							hide_onmobile:true,
							hide_under:778,
							anim:"bottom",
							animSpeed:"500ms",
							animDelay:"1ms",
							h_align:"left",
							v_offset:0,
							space:10,
							width:240,
							height:70,
							min_width:240,
							wrapper_color:"rgba(0, 0, 0, 0.2)",
							visibleAmount:3,
							container:"layergrid"
						}
					},
					parallax: {
						levels:[2,10,15,20,25,30,35,40,45,46,47,48,49,50,51,30],
						type:"mousescroll",
						origo:"slidercenter",
						speed:"0ms"
					},
					viewPort: {
						global:true,
						globalDist:"-200px",
						enable:false
					},
					fallbacks: {
						allowHTML5AutoPlayOnAndroid:true
					},
			});
			
						if (revapi1307 !== undefined) jQuery.fn.revolution.transitionpackInit(revapi1307[0].id, {url:"https://www.sliderrevolution.com/wp-content/plugins/revslider-transitionpack-addon/"});
						 window.TP_SHDRS = window.TP_SHDRS || {};
						 window.TP_SHDRS.water =  window.TP_SHDRS.water || `uniform float intensity;uniform float progress;uniform sampler2D src1;uniform sampler2D src2;uniform vec4 resolution;varying vec2 vUv;vec3 mod289(vec3 x) {return x - floor(x * (1.0 / 289.0)) * 289.0;}vec4 mod289(vec4 x) {return x - floor(x * (1.0 / 289.0)) * 289.0;}vec4 permute(vec4 x) {return mod289(((x*34.0)+1.0)*x);}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}float snoise(vec3 v) {const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);vec3 i  = floor(v + dot(v, C.yyy) );vec3 x0 =   v - i + dot(i, C.xxx) ;vec3 g = step(x0.yzx, x0.xyz);vec3 l = 1.0 - g;vec3 i1 = min( g.xyz, l.zxy );vec3 i2 = max( g.xyz, l.zxy );vec3 x1 = x0 - i1 + C.xxx;vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy;i = mod289(i);vec4 p = permute( permute( permute(i.z + vec4(0.0, i1.z, i2.z, 1.0 ))+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));float n_ = 0.142857142857;vec3  ns = n_ * D.wyz - D.xzx;vec4 j = p - 49.0 * floor(p * ns.z * ns.z);vec4 x_ = floor(j * ns.z);vec4 y_ = floor(j - 7.0 * x_ );    vec4 x = x_ *ns.x + ns.yyyy;vec4 y = y_ *ns.x + ns.yyyy;vec4 h = 1.0 - abs(x) - abs(y);vec4 b0 = vec4( x.xy, y.xy );vec4 b1 = vec4( x.zw, y.zw );vec4 s0 = floor(b0)*2.0 + 1.0;vec4 s1 = floor(b1)*2.0 + 1.0;vec4 sh = -step(h, vec4(0.0));vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;vec3 p0 = vec3(a0.xy,h.x);vec3 p1 = vec3(a0.zw,h.y);vec3 p2 = vec3(a1.xy,h.z);vec3 p3 = vec3(a1.zw,h.w);vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));p0 *= norm.x;p1 *= norm.y;p2 *= norm.z;p3 *= norm.w;  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);m = m * m;return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );}vec3 curlNoise( vec3 p ){const float e = 0.1;float  n1 = snoise(vec3(p.x, p.y + e, p.z));float  n2 = snoise(vec3(p.x, p.y - e, p.z));float  n3 = snoise(vec3(p.x, p.y, p.z + e));float  n4 = snoise(vec3(p.x, p.y, p.z - e));float  n5 = snoise(vec3(p.x + e, p.y, p.z));float  n6 = snoise(vec3(p.x - e, p.y, p.z));float x = n2 - n1 - n4 + n3;float y = n4 - n3 - n6 + n5;float z = n6 - n5 - n2 + n1;const float divisor = 1.0 / ( 2.0 * e );return normalize( vec3( x , y , z ) * divisor );}void main(){vec2 nUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);float f = progress;vec3 curl = curlNoise(vec3(nUV,1.) *intensity + progress*.5) / 1.;vec4 t0 = TEXTURE2D(src1, vec2(nUV.x,nUV.y + f * (curl.x) ) );vec4 t1 = TEXTURE2D(src2, vec2(nUV.x,nUV.y + (1.-f) * (curl.x) ));nUV.x += curl.x;gl_FragColor = mix(t0,t1,f);}`;
						 window.TP_SHDRS.flat =  window.TP_SHDRS.flat || `uniform float zoom; uniform float prange; uniform float tilt; uniform float left; uniform float top; uniform vec4 resolution; uniform float progress; uniform sampler2D src1; uniform sampler2D src2; uniform sampler2D displacement; varying vec2 vUv; vec2 mirror(vec2 v) { vec2 m = mod(v, 2.0); return mix(m, 2.0 - m, step(1.0, m)); } float map(float a, float b, float c, float d, float v, float cmin, float cmax) { return clamp((v - a) * (d - c) / (b - a) + c, cmin, cmax); } vec2 rotateUV(vec2 uv, float rotation, vec2 mid) { return vec2(cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x, cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y); } void main() { vec2 uv = (vUv - vec2(0.5)) * resolution.zw + vec2(0.5); float m = progress; m = smoothstep(0., 1., m); vec2 nUv = vec2(.0, .0); if (tilt != 0.) { float tm = map(0.5, 1., 0., 10., m, 0., 10.); float mc = tm > 9.999 ? 0. : (tm < 8.236 ? max(0., sin(tm / 6.)) : sin(tm - 0.58)); mc = map(0., 10.005, 0., 3., mc, 0., 10.005); nUv = rotateUV(uv, mc * -radians(360. * tilt), vec2(.5, .5)); nUv.x += m * left; nUv.y += m * top; } else { nUv = vec2(uv.x + m * left, uv.y + m * top); } nUv.x -= 0.5; nUv.y -= 0.5; nUv *= 1. + (sin(m * 3.141592653)) * (1. / zoom - 1.); nUv.x += 0.5; nUv.y += 0.5; nUv = mirror(nUv); vec2 nUvIn = nUv; if(mod(left, 2.0) != 0.) nUvIn.x *= -1.; if(mod(top, 2.0) != 0.) nUvIn.y *= -1.; float nprog = map((0.5 - prange), (0.5 + prange), 0., 1., m, 0., 1.); vec4 col = mix(TEXTURE2D(src1, nUv), TEXTURE2D(src2, nUvIn), nprog); gl_FragColor = col; }`;
						 window.TP_SHDRS.wave =  window.TP_SHDRS.wave || `uniform float time;uniform float progress;uniform float width;uniform float scaleX;uniform float scaleY;uniform float transition;uniform float radius;uniform float swipe;uniform sampler2D src1;uniform sampler2D src2;uniform sampler2D displacement;uniform vec4 resolution;varying vec2 vUv;varying vec4 vPosition;float parabola( float x, float k ) {return pow( 4. * x * ( 1. - x ), k );}void main()  {vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);vec2 p = newUV;vec2 start = vec2(0.5,0.5);vec2 aspect = resolution.wz;vec2 uv = newUV;float dt = parabola(progress, 1.);vec4 noise = TEXTURE2D(displacement, fract(vUv+progress*0.04));float prog = progress*0.66 + noise.g * 0.04;float circ = 1. - smoothstep(-width, 0.0, radius * distance(start*aspect, uv*aspect) - prog*(1.+width));float intpl = pow(abs(circ), 1.);vec4 t1 = TEXTURE2D( src1, (uv - 0.5) * (1.0 - intpl) + 0.5 ) ;vec4 t2 = TEXTURE2D( src2, (uv - 0.5) * intpl + 0.5 );gl_FragColor = mix( t1, t2, intpl );}`;
						 window.TP_SHDRS.spin =  window.TP_SHDRS.spin || ` const int Samples = 32; uniform float ox; uniform float oy; uniform float roz; uniform float xdist; uniform float ydist; uniform float zoom; uniform float intensity; uniform bool isShort; uniform float prange; uniform float progress; uniform vec4 resolution; uniform sampler2D src1; uniform sampler2D src2; varying vec2 vUv; float pi = 3.141592653; vec2 mirror(vec2 v) { vec2 m = mod(v, 2.0); return mix(m, 2.0 - m, step(1.0, m)); } vec2 rotate(vec2 uv, vec2 mid, float rotation) { return vec2(cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x, cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y); } float map(float a, float b, float c, float d, float v) { return clamp((v - a) * (d - c) / (b - a) + c, 0., 1.); } vec2 getSample(vec2 temp, vec2 o, float ratio, int i, float intensity) { o.x *= ratio; temp.x *= ratio; temp = rotate(temp, o, float(i) * intensity); temp.x /= ratio; temp = mirror(temp); return temp; } vec2 zoomFunction(vec2 uv, vec2 o, float z, float m) { uv -= o; uv *= 1. + z * m; uv += o; return uv; } void main() { vec2 o = vec2(ox, oy); float Intensity = intensity; vec2 uv = vUv; float ratio = resolution.x / resolution.y; vec2 dir = uv - o; vec4 color = vec4(0.0, 0.0, 0.0, 0.0); float m = progress; m = map(0., 0.999, 0., 1., m); float mult = sin(m * pi); float zm = mult; Intensity *= pow(mult, 2.) * 0.1; o.x *= ratio; uv.x *= ratio; uv = rotate(uv, vec2(o.x, o.y), roz * 1. * pi * m); o.x /= ratio; uv.x /= ratio; if (zoom != 0.) uv = zoomFunction(uv, o, max(zoom, -0.9), zm); vec2 uvIn = uv; vec2 nO = o; if (isShort) { uvIn.x -= o.x * 2.; uvIn.y -= o.y * 2.; nO.x -= o.x * 2.; nO.y -= o.y * 2.; } float nprog = map((0.5 - prange), (0.5 + prange), 0., 1., m); vec2 bUv = uv; vec2 temp = bUv; vec2 tempIn = uv; for (int i = 0; i < Samples; i += 2) { temp = bUv; temp = getSample(temp, o, ratio, i, -Intensity); tempIn = uvIn; tempIn = getSample(tempIn, nO, ratio, i, -Intensity); color += mix(TEXTURE2D(src1, temp), TEXTURE2D(src2, tempIn), nprog); temp = bUv; temp = getSample(temp, o, ratio, i + 1, -Intensity); tempIn = uvIn; tempIn = getSample(tempIn, nO, ratio, i, -Intensity); color += mix(TEXTURE2D(src1, temp), TEXTURE2D(src2, tempIn), nprog); }  gl_FragColor = color / float(Samples); }`;
   } // ← cierre de init:function()
}; // ← cierre de RS_MODULES.modules["revslider13071"]
</script>
    <script type="text/javascript">
        function setREVStartSize(e){
            window.RSIW = window.RSIW===undefined ? window.innerWidth : window.RSIW;
            window.RSIH = window.RSIH===undefined ? window.innerHeight : window.RSIH;
            try {
                var pw = document.getElementById(e.c).parentNode.offsetWidth,
                    newh;
                pw = pw===0 || isNaN(pw) || (e.l=="fullwidth" || e.layout=="fullwidth") ? window.RSIW : pw;
                e.tabw = e.tabw===undefined ? 0 : parseInt(e.tabw);
                e.thumbw = e.thumbw===undefined ? 0 : parseInt(e.thumbw);
                e.tabh = e.tabh===undefined ? 0 : parseInt(e.tabh);
                e.thumbh = e.thumbh===undefined ? 0 : parseInt(e.thumbh);
                e.tabhide = e.tabhide===undefined ? 0 : parseInt(e.tabhide);
                e.thumbhide = e.thumbhide===undefined ? 0 : parseInt(e.thumbhide);
                e.mh = e.mh===undefined || e.mh=="" || e.mh==="auto" ? 0 : parseInt(e.mh,0);
                if(e.layout==="fullscreen" || e.l==="fullscreen")
                    newh = Math.max(e.mh,window.RSIH);
                else{
                    e.gw = Array.isArray(e.gw) ? e.gw : [e.gw];
                    for (var i in e.rl) if (e.gw[i]===undefined || e.gw[i]===0) e.gw[i] = e.gw[i-1];
                    e.gh = e.el===undefined || e.el==="" || (Array.isArray(e.el) && e.el.length==0)? e.gh : e.el;
                    e.gh = Array.isArray(e.gh) ? e.gh : [e.gh];
                    for (var i in e.rl) if (e.gh[i]===undefined || e.gh[i]===0) e.gh[i] = e.gh[i-1];
                                        
                    var nl = new Array(e.rl.length),
                        ix = 0,
                        sl;
                    e.tabw = e.tabhide>=pw ? 0 : e.tabw;
                    e.thumbw = e.thumbhide>=pw ? 0 : e.thumbw;
                    e.tabh = e.tabhide>=pw ? 0 : e.tabh;
                    e.thumbh = e.thumbhide>=pw ? 0 : e.thumbh;
                    for (var i in e.rl) nl[i] = e.rl[i]<window.RSIW ? 0 : e.rl[i];
                    sl = nl[0];
                    for (var i in nl) if (sl>nl[i] && nl[i]>0) { sl = nl[i]; ix=i;}
                    var m = pw>(e.gw[ix]+e.tabw+e.thumbw) ? 1 : (pw-(e.tabw+e.thumbw)) / (e.gw[ix]);
                    newh =  (e.gh[ix] * m) + (e.tabh + e.thumbh);
                }
                var el = document.getElementById(e.c);
                if (el!==null && el) el.style.height = newh+"px";
                el = document.getElementById(e.c+"_wrapper");
                if (el!==null && el) {
                    el.style.height = newh+"px";
                    el.style.display = "block";
                }
            } catch(e){
                console.log("Failure at Presize of Slider:" + e)
            }
        };
    </script>
    <script type="text/javascript" src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider/public/assets/js/rbtools.min4261.js" defer async></script>
    <script rel="preload" type="text/javascript" src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider/public/assets/js/rs6.min4261.js" defer async></script>
    <script type="text/javascript" src="/assets/default/vendors/revolution/agencia_digital_mono/wp-content/plugins/revslider-transitionpack-addon/public/assets/js/revolution.addon.transitionpack.min0ba6.js" defer async></script>
   

    <script id="rs-initialisation-scripts">
        var tpj = jQuery;
        var revapi1307, revapi1211, revapi4;

        if (window.RS_MODULES === undefined) window.RS_MODULES = {};
        if (RS_MODULES.modules === undefined) RS_MODULES.modules = {};
        RS_MODULES.modules["revslider13071"] = {
            once: RS_MODULES.modules["revslider13071"] !== undefined ? RS_MODULES.modules["revslider13071"].once : undefined,
            init: function() {
                window.revapi1307 = window.revapi1307 === undefined || window.revapi1307 === null || window.revapi1307.length === 0 ? document.getElementById("rev_slider_1307_1") : window.revapi1307;
                if (window.revapi1307 === null || window.revapi1307 === undefined || window.revapi1307.length == 0) {
                    window.revapi1307initTry = window.revapi1307initTry === undefined ? 0 : window.revapi1307initTry + 1;
                    if (window.revapi1307initTry < 20) requestAnimationFrame(function() {
                        RS_MODULES.modules["revslider13071"].init()
                    });
                    return;
                }
                window.revapi1307 = jQuery(window.revapi1307);
                if (window.revapi1307.revolution == undefined) {
                    revslider_showDoubleJqueryError("rev_slider_1307_1");
                    return;
                }
                revapi1307.revolutionInit({
                    revapi: "revapi1307",
                    DPR: "dpr",
                    sliderLayout: "fullscreen",
                    visibilityLevels: "1500,1240,778,480",
                    gridwidth: "1240,1024,778,480",
                    gridheight: "800,700,500,500",
                    lazyType: "smart",
                    perspective: 600,
                    perspectiveType: "global",
                    lazyloaddata: "lazy-src",
                    lazyOnBg: true,
                    editorheight: "800,700,500,500",
                    responsiveLevels: "1500,1240,778,480",
                    fullScreenOffsetContainer: "#masthead",
                    progressBar: {
                        color: "rgba(255,255,255,0.3)",
                        vertical: "top",
                        size: 5,
                        reset: "animate"
                    },
                    navigation: {
                        wheelCallDelay: 1000,
                        onHoverStop: false,
                        touch: {
                            touchenabled: true
                        },
                        arrows: {
                            enable: true,
                            style: "uranus",
                            hide_over: "777px",
                            left: {
                                h_align: "right",
                                v_align: "bottom",
                                h_offset: 60,
                                v_offset: 40
                            },
                            right: {
                                v_align: "bottom",
                                h_offset: 10,
                                v_offset: 40
                            }
                        },
                        tabs: {
                            enable: true,
tmp:"<div class=\"tp-tab-content\">  <span class=\"tp-tab-date\">{{param1}}</span>  <span class=\"tp-tab-title\">{{title}}</span></div><div class=\"tp-tab-image\"></div>",
                            style: "cyber_tabs",
                            hide_onmobile: true,
                            hide_under: 778,
                            anim: "bottom",
                            animSpeed: "500ms",
                            animDelay: "1ms",
                            h_align: "left",
                            v_offset: 0,
                            space: 10,
                            width: 240,
                            height: 70,
                            min_width: 240,
                            wrapper_color: "rgba(0, 0, 0, 0.2)",
                            visibleAmount: 3,
                            container: "layergrid"
                        }
                    },
                    parallax: {
                        levels: [2, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 51, 30],
                        type: "mousescroll",
                        origo: "slidercenter",
                        speed: "0ms"
                    },
                    viewPort: {
                        global: true,
                        globalDist: "-200px",
                        enable: false
                    },
                    fallbacks: {
                        allowHTML5AutoPlayOnAndroid: true
                    },
                });

                if (revapi1307 !== undefined) jQuery.fn.revolution.transitionpackInit(revapi1307[0].id, {
                    url: "https://www.sliderrevolution.com/wp-content/plugins/revslider-transitionpack-addon/"
                });
                window.TP_SHDRS = window.TP_SHDRS || {};
                window.TP_SHDRS.water = window.TP_SHDRS.water || `uniform float intensity;uniform float progress;uniform sampler2D src1;uniform sampler2D src2;uniform vec4 resolution;varying vec2 vUv;vec3 mod289(vec3 x) {return x - floor(x * (1.0 / 289.0)) * 289.0;}vec4 mod289(vec4 x) {return x - floor(x * (1.0 / 289.0)) * 289.0;}vec4 permute(vec4 x) {return mod289(((x*34.0)+1.0)*x);}vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}float snoise(vec3 v) {const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);vec3 i  = floor(v + dot(v, C.yyy) );vec3 x0 =   v - i + dot(i, C.xxx) ;vec3 g = step(x0.yzx, x0.xyz);vec3 l = 1.0 - g;vec3 i1 = min( g.xyz, l.zxy );vec3 i2 = max( g.xyz, l.zxy );vec3 x1 = x0 - i1 + C.xxx;vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy;i = mod289(i);vec4 p = permute( permute( permute(i.z + vec4(0.0, i1.z, i2.z, 1.0 ))+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));float n_ = 0.142857142857;vec3  ns = n_ * D.wyz - D.xzx;vec4 j = p - 49.0 * floor(p * ns.z * ns.z);vec4 x_ = floor(j * ns.z);vec4 y_ = floor(j - 7.0 * x_ );    vec4 x = x_ *ns.x + ns.yyyy;vec4 y = y_ *ns.x + ns.yyyy;vec4 h = 1.0 - abs(x) - abs(y);vec4 b0 = vec4( x.xy, y.xy );vec4 b1 = vec4( x.zw, y.zw );vec4 s0 = floor(b0)*2.0 + 1.0;vec4 s1 = floor(b1)*2.0 + 1.0;vec4 sh = -step(h, vec4(0.0));vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;vec3 p0 = vec3(a0.xy,h.x);vec3 p1 = vec3(a0.zw,h.y);vec3 p2 = vec3(a1.xy,h.z);vec3 p3 = vec3(a1.zw,h.w);vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));p0 *= norm.x;p1 *= norm.y;p2 *= norm.z;p3 *= norm.w;  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);m = m * m;return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );}vec3 curlNoise( vec3 p ){const float e = 0.1;float  n1 = snoise(vec3(p.x, p.y + e, p.z));float  n2 = snoise(vec3(p.x, p.y - e, p.z));float  n3 = snoise(vec3(p.x, p.y, p.z + e));float  n4 = snoise(vec3(p.x, p.y, p.z - e));float  n5 = snoise(vec3(p.x + e, p.y, p.z));float  n6 = snoise(vec3(p.x - e, p.y, p.z));float x = n2 - n1 - n4 + n3;float y = n4 - n3 - n6 + n5;float z = n6 - n5 - n2 + n1;const float divisor = 1.0 / ( 2.0 * e );return normalize( vec3( x , y , z ) * divisor );}void main(){vec2 nUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);float f = progress;vec3 curl = curlNoise(vec3(nUV,1.) *intensity + progress*.5) / 1.;vec4 t0 = TEXTURE2D(src1, vec2(nUV.x,nUV.y + f * (curl.x) ) );vec4 t1 = TEXTURE2D(src2, vec2(nUV.x,nUV.y + (1.-f) * (curl.x) ));nUV.x += curl.x;gl_FragColor = mix(t0,t1,f);}`;
                window.TP_SHDRS.flat = window.TP_SHDRS.flat || `uniform float zoom; uniform float prange; uniform float tilt; uniform float left; uniform float top; uniform vec4 resolution; uniform float progress; uniform sampler2D src1; uniform sampler2D src2; uniform sampler2D displacement; varying vec2 vUv; vec2 mirror(vec2 v) { vec2 m = mod(v, 2.0); return mix(m, 2.0 - m, step(1.0, m)); } float map(float a, float b, float c, float d, float v, float cmin, float cmax) { return clamp((v - a) * (d - c) / (b - a) + c, cmin, cmax); } vec2 rotateUV(vec2 uv, float rotation, vec2 mid) { return vec2(cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x, cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y); } void main() { vec2 uv = (vUv - vec2(0.5)) * resolution.zw + vec2(0.5); float m = progress; m = smoothstep(0., 1., m); vec2 nUv = vec2(.0, .0); if (tilt != 0.) { float tm = map(0.5, 1., 0., 10., m, 0., 10.); float mc = tm > 9.999 ? 0. : (tm < 8.236 ? max(0., sin(tm / 6.)) : sin(tm - 0.58)); mc = map(0., 10.005, 0., 3., mc, 0., 10.005); nUv = rotateUV(uv, mc * -radians(360. * tilt), vec2(.5, .5)); nUv.x += m * left; nUv.y += m * top; } else { nUv = vec2(uv.x + m * left, uv.y + m * top); } nUv.x -= 0.5; nUv.y -= 0.5; nUv *= 1. + (sin(m * 3.141592653)) * (1. / zoom - 1.); nUv.x += 0.5; nUv.y += 0.5; nUv = mirror(nUv); vec2 nUvIn = nUv; if(mod(left, 2.0) != 0.) nUvIn.x *= -1.; if(mod(top, 2.0) != 0.) nUvIn.y *= -1.; float nprog = map((0.5 - prange), (0.5 + prange), 0., 1., m, 0., 1.); vec4 col = mix(TEXTURE2D(src1, nUv), TEXTURE2D(src2, nUvIn), nprog); gl_FragColor = col; }`;
                window.TP_SHDRS.wave = window.TP_SHDRS.wave || `uniform float time;uniform float progress;uniform float width;uniform float scaleX;uniform float scaleY;uniform float transition;uniform float radius;uniform float swipe;uniform sampler2D src1;uniform sampler2D src2;uniform sampler2D displacement;uniform vec4 resolution;varying vec2 vUv;varying vec4 vPosition;float parabola( float x, float k ) {return pow( 4. * x * ( 1. - x ), k );}void main()  {vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);vec2 p = newUV;vec2 start = vec2(0.5,0.5);vec2 aspect = resolution.wz;vec2 uv = newUV;float dt = parabola(progress, 1.);vec4 noise = TEXTURE2D(displacement, fract(vUv+progress*0.04));float prog = progress*0.66 + noise.g * 0.04;float circ = 1. - smoothstep(-width, 0.0, radius * distance(start*aspect, uv*aspect) - prog*(1.+width));float intpl = pow(abs(circ), 1.);vec4 t1 = TEXTURE2D( src1, (uv - 0.5) * (1.0 - intpl) + 0.5 ) ;vec4 t2 = TEXTURE2D( src2, (uv - 0.5) * intpl + 0.5 );gl_FragColor = mix( t1, t2, intpl );}`;
                window.TP_SHDRS.spin = window.TP_SHDRS.spin || ` const int Samples = 32; uniform float ox; uniform float oy; uniform float roz; uniform float xdist; uniform float ydist; uniform float zoom; uniform float intensity; uniform bool isShort; uniform float prange; uniform float progress; uniform vec4 resolution; uniform sampler2D src1; uniform sampler2D src2; varying vec2 vUv; float pi = 3.141592653; vec2 mirror(vec2 v) { vec2 m = mod(v, 2.0); return mix(m, 2.0 - m, step(1.0, m)); } vec2 rotate(vec2 uv, vec2 mid, float rotation) { return vec2(cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y - mid.y) + mid.x, cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x - mid.x) + mid.y); } float map(float a, float b, float c, float d, float v) { return clamp((v - a) * (d - c) / (b - a) + c, 0., 1.); } vec2 getSample(vec2 temp, vec2 o, float ratio, int i, float intensity) { o.x *= ratio; temp.x *= ratio; temp = rotate(temp, o, float(i) * intensity); temp.x /= ratio; temp = mirror(temp); return temp; } vec2 zoomFunction(vec2 uv, vec2 o, float z, float m) { uv -= o; uv *= 1. + z * m; uv += o; return uv; } void main() { vec2 o = vec2(ox, oy); float Intensity = intensity; vec2 uv = vUv; float ratio = resolution.x / resolution.y; vec2 dir = uv - o; vec4 color = vec4(0.0, 0.0, 0.0, 0.0); float m = progress; m = map(0., 0.999, 0., 1., m); float mult = sin(m * pi); float zm = mult; Intensity *= pow(mult, 2.) * 0.1; o.x *= ratio; uv.x *= ratio; uv = rotate(uv, vec2(o.x, o.y), roz * 1. * pi * m); o.x /= ratio; uv.x /= ratio; if (zoom != 0.) uv = zoomFunction(uv, o, max(zoom, -0.9), zm); vec2 uvIn = uv; vec2 nO = o; if (isShort) { uvIn.x -= o.x * 2.; uvIn.y -= o.y * 2.; nO.x -= o.x * 2.; nO.y -= o.y * 2.; } float nprog = map((0.5 - prange), (0.5 + prange), 0., 1., m); vec2 bUv = uv; vec2 temp = bUv; vec2 tempIn = uv; for (int i = 0; i < Samples; i += 2) { temp = bUv; temp = getSample(temp, o, ratio, i, -Intensity); tempIn = uvIn; tempIn = getSample(tempIn, nO, ratio, i, -Intensity); color += mix(TEXTURE2D(src1, temp), TEXTURE2D(src2, tempIn), nprog); temp = bUv; temp = getSample(temp, o, ratio, i + 1, -Intensity); tempIn = uvIn; tempIn = getSample(tempIn, nO, ratio, i, -Intensity); color += mix(TEXTURE2D(src1, temp), TEXTURE2D(src2, tempIn), nprog); } gl_FragColor = color / float(Samples); }`;
            }
        };

        if (window.RS_MODULES.checkMinimal !== undefined) {
            window.RS_MODULES.checkMinimal();
        };
    </script>
    <script>
window.addEventListener('scroll', function() {

    const navbar = document.querySelector('.vertical-navbar');

    if(window.scrollY > 80){
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }

});
</script>
<script>

document.querySelectorAll('.star').forEach(star => {

    const random = (min,max) =>
    Math.floor(Math.random() * (max - min + 1) + min);

    star.style.setProperty('--angle', `${random(0,360)}deg`);
    star.style.setProperty('--duration', `${random(6,18)}s`);
    star.style.setProperty('--alpha', random(40,100) / 100);
    star.style.setProperty('--size', `${random(2,4)}px`);
    star.style.setProperty('--distance', `${random(40,120)}px`);

});

</script>

    <link href="/assets/default/vendors/flagstrap/css/flags.css" rel="stylesheet">
    <script src="/assets/default/vendors/flagstrap/js/jquery.flagstrap.min.js"></script>
    <script src="/assets/default/js/parts/top_nav_flags.min.js"></script>
    <script src="/assets/default/js/parts/navbar.min.js"></script>

<script src="/assets/default/js/parts/main.min.js"></script>

<script>
    
    
</script>

</body>
</html>
