| Server IP : 172.67.191.97 / Your IP : 104.23.243.196 Web Server : Apache/2.4.63 (Ubuntu) System : Linux adminpruebas-Virtual-Machine 6.14.0-37-generic #37-Ubuntu SMP PREEMPT_DYNAMIC Fri Nov 14 22:10:32 UTC 2025 x86_64 User : www-data ( 33) PHP Version : 8.4.5 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/idiomas/media/idiomas/inscripcion/ |
Upload File : |
(function () {
const apps = document.querySelectorAll('[data-inscription-process-app]');
if (!apps.length) {
return;
}
const base = '/plantillajoomla5.3/index.php';
const links = {
calendar: `${base}/academico/calendario-academico`,
inscriptions: `${base}/academico/inscripciones`,
news: `${base}/comunidad/noticias`,
values: `${base}/tarifas`,
};
const steps = [
{
icon: 'fa-pencil-square-o',
title: 'Inscripción en Línea',
text: 'Realiza tu inscripción a través del portal oficial durante las fechas de convocatoria. ¡Este es el primer paso para unirte a nosotros!',
label: 'Ir a Inscripciones',
href: links.inscriptions,
},
{
icon: 'fa-list-alt',
title: 'Lista de Admitidos',
text: 'Una vez cerrado el proceso, se publicará la lista de admitidos. Si no estás en la lista, quedarás en lista de espera. ¡Mantente atento!',
label: 'Ver Noticias',
href: links.news,
},
{
icon: 'fa-envelope-o',
title: 'Notificación y Pago',
text: 'Los admitidos recibirán una notificación por correo para generar el recibo de pago. Realiza el pago para asegurar tu cupo.',
label: 'Consultar Valores',
href: links.values,
},
{
icon: 'fa-cloud-upload',
title: 'Carga de Documentos',
text: 'Sube los documentos requeridos en la plataforma para formalizar tu matrícula. Revisa la lista de documentos más abajo.',
label: 'Ver Documentos',
href: '#documentos',
},
];
const documents = [
{
title: 'Nuevos',
icon: 'fa-user-plus',
items: [
'Recibo de pago del semestre vigente',
'Formulario de inscripción diligenciado',
'Documento de identidad del estudiante',
'Fotocopia documento identidad acudiente',
'Fotografía 3x4',
'Certificado de afiliación a EPS vigente',
],
},
{
title: 'Antiguos',
icon: 'fa-users',
items: [
'Recibo de pago del semestre vigente',
'Documento de identidad del estudiante',
'Fotocopia documento identidad acudiente',
'Paz y salvo',
'Certificado de afiliación a EPS vigente',
],
},
];
const escapeHtml = (value) => String(value || '')
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
const renderSteps = () => steps.map((step, index) => `
<article class="idioma-process__step" style="--delay:${index * 110}ms">
<div class="idioma-process__step-card">
<p>Paso ${index + 1}</p>
<h3><i class="fa ${escapeHtml(step.icon)}" aria-hidden="true"></i>${escapeHtml(step.title)}</h3>
<div>${escapeHtml(step.text)}</div>
<a class="idioma-process__button idioma-process__button--outline" href="${escapeHtml(step.href)}">${escapeHtml(step.label)}</a>
</div>
<span class="idioma-process__marker" aria-hidden="true">${index + 1}</span>
</article>`).join('');
const renderDocuments = () => documents.map((group, index) => `
<article class="idioma-process__doc-card" style="--delay:${index * 120}ms">
<h3><i class="fa ${escapeHtml(group.icon)}" aria-hidden="true"></i>${escapeHtml(group.title)}</h3>
<ul>
${group.items.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}
</ul>
</article>`).join('');
const render = (app) => {
app.innerHTML = `
<style>
.com-content-article.item-page .page-header,
.com-content-article.item-page .article-info,
.com-content-article.item-page figure.item-image{display:none!important}
#g-container-main,
#g-container-main .g-container,
#g-mainbar .g-content,
.platform-content.container,
.platform-content .row,
.platform-content .col{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.com-content-article.item-page .com-content-article__body{width:100%!important;max-width:none!important;margin:0!important}
html,body{overflow-x:hidden}
.idioma-process-shell{position:relative;left:50%;width:100vw;margin-left:-50vw;margin-right:-50vw}
.idioma-process{--red:#ef1b2d;--red-dark:#c91522;--ink:#28205c;--muted:#667085;--line:#e8ebf2;--soft:#fff4f5;display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:linear-gradient(180deg,#fff 0,#fff7f8 42%,#fff 100%);color:#222838;overflow:hidden}
.idioma-process *{box-sizing:border-box}
.idioma-process__wrap{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:clamp(2.7rem,6vw,5rem) 0 clamp(3rem,7vw,5.8rem)}
.idioma-process__hero{text-align:center;margin:0 auto clamp(2rem,5vw,3.6rem);max-width:860px;opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.idioma-process:not(.is-ready) .idioma-process__hero{opacity:0;transform:translateY(22px)}
.idioma-process__hero-icon{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 1rem;border-radius:999px;background:linear-gradient(135deg,var(--red),#ff4b59);color:#fff;font-size:2.4rem;box-shadow:0 20px 52px rgba(239,27,45,.25);animation:processFloat 4.2s ease-in-out infinite}
.idioma-process__hero h1{margin:0 0 .8rem;color:var(--red);font-size:clamp(2.25rem,5vw,4.2rem);line-height:1.03;font-weight:950;letter-spacing:0}
.idioma-process__hero p{margin:0 auto;color:var(--muted);font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.6;max-width:760px}
.idioma-process__notice{position:relative;max-width:850px;margin:0 auto clamp(2.8rem,6vw,4.3rem);padding:clamp(1.4rem,3vw,2rem);border:2px solid rgba(239,27,45,.16);border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 20px 56px rgba(22,29,54,.11);text-align:center;overflow:hidden;opacity:1;transform:none;transition:opacity .7s ease .12s,transform .7s ease .12s,border-color .25s ease,box-shadow .25s ease}
.idioma-process:not(.is-ready) .idioma-process__notice{opacity:0;transform:translateY(26px)}
.idioma-process__notice::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(239,27,45,.08),transparent);transform:translateX(-120%);transition:transform .8s ease}
.idioma-process__notice:hover::before{transform:translateX(120%)}
.idioma-process__notice:hover{border-color:rgba(239,27,45,.32);box-shadow:0 26px 70px rgba(22,29,54,.15)}
.idioma-process__notice h2{position:relative;margin:0 0 .65rem;color:var(--ink);font-size:clamp(1.45rem,2.4vw,2rem);font-weight:950;letter-spacing:0}
.idioma-process__notice p{position:relative;margin:0 auto 1.2rem;max-width:700px;color:var(--muted);line-height:1.62}
.idioma-process__button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;padding:.68rem 1.05rem;border-radius:7px;font-weight:850;text-decoration:none!important;line-height:1.2;transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease,color .24s ease}
.idioma-process__button--solid{background:var(--red);color:#fff!important;box-shadow:0 14px 34px rgba(239,27,45,.24)}
.idioma-process__button--outline{border:1px solid #dfe3eb;background:#fff;color:#30364a!important}
.idioma-process__button:hover{transform:translateY(-3px)}
.idioma-process__button--solid:hover{background:var(--red-dark);box-shadow:0 20px 45px rgba(239,27,45,.3)}
.idioma-process__button--outline:hover{border-color:rgba(239,27,45,.38);color:var(--red)!important;box-shadow:0 14px 34px rgba(22,29,54,.1)}
.idioma-process__section-title{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 0 clamp(1.8rem,4vw,3rem);color:var(--red);font-size:clamp(1.75rem,3vw,2.6rem);font-weight:950;text-align:center;letter-spacing:0;opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.idioma-process:not(.is-ready) .idioma-process__section-title{opacity:0;transform:translateY(18px)}
.idioma-process__timeline{position:relative;margin:0 auto clamp(3rem,7vw,5rem);max-width:1040px}
.idioma-process__timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;border-radius:999px;background:linear-gradient(180deg,rgba(239,27,45,.18),var(--red),rgba(239,27,45,.18));transform:translateX(-50%)}
.idioma-process__step{position:relative;display:flex;align-items:center;width:100%;margin:0 0 2rem;opacity:1;transform:none;transition:opacity .58s ease,transform .58s ease}
.idioma-process:not(.is-ready) .idioma-process__step{opacity:0;transform:translateY(28px)}
.idioma-process.is-ready .idioma-process__step{transition-delay:calc(.16s + var(--delay))}
.idioma-process__step:nth-child(odd){justify-content:flex-start}
.idioma-process__step:nth-child(even){justify-content:flex-end}
.idioma-process__step-card{position:relative;width:calc(50% - 4.7rem);padding:1.45rem;border:1px solid #e4e8ef;border-radius:8px;background:#fff;box-shadow:0 18px 48px rgba(22,29,54,.1);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.idioma-process__step-card:hover{transform:translateY(-7px);border-color:rgba(239,27,45,.34);box-shadow:0 30px 78px rgba(22,29,54,.15)}
.idioma-process__step-card p{margin:0 0 .45rem;color:var(--red);font-weight:950;font-size:.92rem}
.idioma-process__step-card h3{display:flex;align-items:center;gap:.7rem;margin:0 0 .85rem;color:var(--ink);font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.16;font-weight:950;letter-spacing:0}
.idioma-process__step-card h3 i{color:var(--red);font-size:1.9rem;transition:transform .28s ease}
.idioma-process__step-card:hover h3 i{transform:rotate(-5deg) scale(1.08)}
.idioma-process__step-card div{margin:0 0 1.2rem;color:var(--muted);line-height:1.62}
.idioma-process__marker{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:62px;height:62px;border-radius:999px;background:var(--red);color:#fff;font-size:1.45rem;font-weight:950;box-shadow:0 18px 42px rgba(239,27,45,.28);transform:translate(-50%,-50%);transition:transform .28s ease,box-shadow .28s ease}
.idioma-process__step:hover .idioma-process__marker{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 22px 52px rgba(239,27,45,.36)}
.idioma-process__old-card{max-width:820px;margin:0 auto clamp(3rem,7vw,5rem);padding:clamp(1.3rem,3vw,2rem);border:1px solid #e4e8ef;border-radius:8px;background:#fff;box-shadow:0 18px 48px rgba(22,29,54,.1);opacity:1;transform:none;transition:opacity .7s ease .2s,transform .7s ease .2s,box-shadow .28s ease,border-color .28s ease}
.idioma-process:not(.is-ready) .idioma-process__old-card{opacity:0;transform:translateY(24px)}
.idioma-process__old-card:hover{border-color:rgba(239,27,45,.28);box-shadow:0 28px 70px rgba(22,29,54,.14)}
.idioma-process__old-card-inner{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.idioma-process__old-card i{display:grid;place-items:center;width:58px;height:58px;border-radius:999px;background:var(--soft);color:var(--red);font-size:1.8rem}
.idioma-process__old-card h3{margin:0 0 .65rem;color:var(--ink);font-size:1.45rem;font-weight:950;letter-spacing:0}
.idioma-process__old-card p{margin:.55rem 0 0;color:var(--muted);line-height:1.62}
.idioma-process__docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2rem);max-width:980px;margin:0 auto}
.idioma-process__doc-card{padding:clamp(1.3rem,3vw,2rem);border:1px solid #e4e8ef;border-radius:8px;background:#fff;box-shadow:0 18px 48px rgba(22,29,54,.1);opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease,border-color .28s ease,box-shadow .28s ease}
.idioma-process:not(.is-ready) .idioma-process__doc-card{opacity:0;transform:translateY(24px)}
.idioma-process.is-ready .idioma-process__doc-card{transition-delay:calc(.18s + var(--delay))}
.idioma-process__doc-card:hover{transform:translateY(-7px);border-color:rgba(239,27,45,.3);box-shadow:0 28px 70px rgba(22,29,54,.14)}
.idioma-process__doc-card h3{display:flex;align-items:center;gap:.65rem;margin:0 0 1rem;color:var(--ink);font-size:1.35rem;font-weight:950;letter-spacing:0}
.idioma-process__doc-card h3 i{color:var(--red)}
.idioma-process__doc-card ul{margin:0;padding-left:1.25rem;color:#424a5c;line-height:1.75}
.idioma-process__doc-card li::marker{color:var(--red)}
@keyframes processFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:820px){
.idioma-process__timeline::before{left:31px}
.idioma-process__step,.idioma-process__step:nth-child(even),.idioma-process__step:nth-child(odd){justify-content:flex-start;padding-left:70px}
.idioma-process__step-card{width:100%}
.idioma-process__marker{left:31px;top:2rem;width:48px;height:48px;font-size:1.05rem;transform:translate(-50%,0)}
.idioma-process__step:hover .idioma-process__marker{transform:translate(-50%,0) scale(1.08)}
.idioma-process__old-card-inner{grid-template-columns:1fr;text-align:center}
.idioma-process__old-card i{margin:0 auto}
.idioma-process__docs{grid-template-columns:1fr}
}
@media (max-width:540px){
.idioma-process__wrap{width:min(100% - 1rem,1180px)}
.idioma-process__hero-icon{width:64px;height:64px;font-size:2rem}
.idioma-process__step{padding-left:58px}
.idioma-process__timeline::before{left:24px}
.idioma-process__marker{left:24px}
.idioma-process__step-card,.idioma-process__notice,.idioma-process__old-card,.idioma-process__doc-card{border-radius:7px}
}
@media (prefers-reduced-motion:reduce){
.idioma-process *{animation:none!important;transition:none!important}
.idioma-process:not(.is-ready) .idioma-process__hero,
.idioma-process:not(.is-ready) .idioma-process__notice,
.idioma-process:not(.is-ready) .idioma-process__section-title,
.idioma-process:not(.is-ready) .idioma-process__step,
.idioma-process:not(.is-ready) .idioma-process__old-card,
.idioma-process:not(.is-ready) .idioma-process__doc-card{opacity:1;transform:none}
}
</style>
<section class="idioma-process" aria-labelledby="idioma-process-title">
<div class="idioma-process__wrap">
<header class="idioma-process__hero">
<span class="idioma-process__hero-icon" aria-hidden="true"><i class="fa fa-user-plus"></i></span>
<h1 id="idioma-process-title">Proceso de Inscripción</h1>
<p>Aquí encontrarás toda la información para unirte a la comunidad del Centro de Idiomas UNILLANOS.</p>
</header>
<aside class="idioma-process__notice">
<h2>Calendario Académico</h2>
<p>Todos los procesos de inscripción, matrícula y desarrollo de cursos están sujetos a las fechas estipuladas en el calendario académico, el cual puede tener modificaciones.</p>
<a class="idioma-process__button idioma-process__button--solid" href="${links.calendar}">Consultar Calendario</a>
</aside>
<section aria-labelledby="new-students-title">
<h2 class="idioma-process__section-title" id="new-students-title"><i class="fa fa-user-plus" aria-hidden="true"></i>Para Estudiantes Nuevos</h2>
<div class="idioma-process__timeline">
${renderSteps()}
</div>
</section>
<section aria-labelledby="old-students-title">
<h2 class="idioma-process__section-title" id="old-students-title"><i class="fa fa-users" aria-hidden="true"></i>Para Estudiantes Antiguos</h2>
<article class="idioma-process__old-card">
<div class="idioma-process__old-card-inner">
<i class="fa fa-info" aria-hidden="true"></i>
<div>
<h3>Proceso de Renovación</h3>
<p>El proceso para estudiantes antiguos es más directo. Debes esperar la notificación de creación de recibos de pago en tu correo electrónico institucional, en los tiempos establecidos en el calendario académico.</p>
<p>Posteriormente, deberás cargar los documentos requeridos para sentar tu matrícula en las fechas correspondientes.</p>
</div>
</div>
</article>
</section>
<section id="documentos" aria-labelledby="documents-title">
<h2 class="idioma-process__section-title" id="documents-title">Documentos Requeridos</h2>
<div class="idioma-process__docs">
${renderDocuments()}
</div>
</section>
</div>
</section>`;
requestAnimationFrame(() => {
const root = app.querySelector('.idioma-process');
if (root) {
root.classList.add('is-ready');
}
});
};
apps.forEach(render);
}());