(function () {
  const apps = document.querySelectorAll('[data-values-app]');

  if (!apps.length) {
    return;
  }

  const courses = [
    {
      title: '5 - 6 Años',
      icon: 'fa-smile-o',
      tuition: '660.000',
      social: '597.000',
      intensity: '3 Horas / Sem',
    },
    {
      title: '7 - 10 Años',
      icon: 'fa-building-o',
      tuition: '660.000',
      social: '597.000',
      intensity: '3 Horas / Sem',
    },
    {
      title: '11 - 14 Años',
      icon: 'fa-users',
      tuition: '889.000',
      social: '749.000',
      intensity: '4 Horas / Sem',
    },
    {
      title: '15 Años en adelante',
      icon: 'fa-graduation-cap',
      tuition: '889.000',
      social: '749.000',
      intensity: '4 Horas / Sem',
    },
    {
      title: '15 Años en adelante (Intensivo)',
      icon: 'fa-clock-o',
      tuition: '1.523.000',
      social: '1.269.000',
      intensity: '8 Horas / Sem',
    },
    {
      title: 'Programa por Habilidades',
      icon: 'fa-bolt',
      tuition: '889.000',
      social: '749.000',
      intensity: '4 Horas / Sem',
    },
  ];

  const services = [
    ['fa-question-circle-o', 'Pruebas Diagnósticas', '$48.000'],
    ['fa-check-circle-o', 'Pruebas de Suficiencia', '$208.000'],
    ['fa-file-text-o', 'Certificados', '$38.000'],
    ['fa-graduation-cap', 'Preparación Pruebas Internacionales', '$861.000'],
  ];

  const escapeHtml = (value) => String(value || '')
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');

  const courseCards = courses.map((course, index) => `
    <article class="idioma-values-2026__card" style="--delay:${index * 80}ms">
      <div class="idioma-values-2026__card-head">
        <i class="fa ${escapeHtml(course.icon)}" aria-hidden="true"></i>
        <h3>${escapeHtml(course.title)}</h3>
      </div>
      <div class="idioma-values-2026__card-body">
        <span>Valor Matrícula</span>
        <strong>$${escapeHtml(course.tuition)}</strong>
        <span><i class="fa fa-percent" aria-hidden="true"></i> Valor Proyección Social</span>
        <em>$${escapeHtml(course.social)}</em>
      </div>
      <footer>
        <i class="fa fa-clock-o" aria-hidden="true"></i>
        ${escapeHtml(course.intensity)}
      </footer>
    </article>`).join('');

  const serviceCards = services.map((service, index) => `
    <article class="idioma-values-2026__service-card" style="--delay:${index * 70}ms">
      <i class="fa ${escapeHtml(service[0])}" aria-hidden="true"></i>
      <h3>${escapeHtml(service[1])}</h3>
      <strong>${escapeHtml(service[2])}</strong>
    </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}
        .idioma-values-2026{--values-red:#ef1b2d;--values-red-dark:#cf1724;--values-ink:#28205c;--values-muted:#6a7282;--values-line:#eceff4;--values-soft:#fff1f3;background:radial-gradient(circle at 50% 8rem,rgba(239,27,45,.055),transparent 22rem),linear-gradient(180deg,#fff 0,#fbfcff 55%,#fff 100%);color:#24283a;overflow:hidden}
        .idioma-values-2026 *{box-sizing:border-box}
        .idioma-values-2026__wrap{width:min(1220px,calc(100% - 2rem));margin:0 auto;padding:clamp(2.6rem,6vw,5.5rem) 0 clamp(3rem,7vw,5.5rem)}
        .idioma-values-2026__hero{text-align:center;max-width:780px;margin:0 auto clamp(2.3rem,5vw,4rem);opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
        .idioma-values-2026:not(.is-ready) .idioma-values-2026__hero{opacity:0;transform:translateY(20px)}
        .idioma-values-2026__money{display:grid;place-items:center;width:76px;height:76px;margin:0 auto .85rem;border-radius:999px;color:var(--values-red);font-size:3.1rem;line-height:1;background:linear-gradient(180deg,#fff,#fff3f5);box-shadow:0 20px 48px rgba(239,27,45,.13);animation:valuesFloat 4s ease-in-out infinite}
        .idioma-values-2026__hero h1{position:relative;margin:0;color:var(--values-red);font-size:clamp(2.35rem,5vw,4.15rem);line-height:1.02;font-weight:950;letter-spacing:0}
        .idioma-values-2026__hero h1::after{content:"";position:absolute;left:50%;bottom:-.55rem;width:min(180px,42vw);height:4px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--values-red),transparent);transform:translateX(-50%) scaleX(.4);opacity:.65;transition:transform .8s ease .2s}
        .idioma-values-2026.is-ready .idioma-values-2026__hero h1::after{transform:translateX(-50%) scaleX(1)}
        .idioma-values-2026__hero p{max-width:680px;margin:.9rem auto 0;color:var(--values-muted);font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.58}
        .idioma-values-2026__section-title{text-align:center;margin:0 0 clamp(1.2rem,3vw,2rem);color:var(--values-red);font-size:clamp(1.65rem,3vw,2.35rem);font-weight:950;letter-spacing:0}
        .idioma-values-2026__courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
        .idioma-values-2026__card{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:330px;border:1px solid var(--values-line);border-radius:8px;background:#fff;box-shadow:0 16px 42px rgba(23,31,58,.1);overflow:hidden;opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease,box-shadow .28s ease,border-color .28s ease}
        .idioma-values-2026__card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.68) 42%,transparent 58%);transform:translateX(-130%);transition:transform .65s ease;pointer-events:none;z-index:2}
        .idioma-values-2026__card:hover::before{transform:translateX(130%)}
        .idioma-values-2026:not(.is-ready) .idioma-values-2026__card{opacity:0;transform:translateY(22px) scale(.98)}
        .idioma-values-2026.is-ready .idioma-values-2026__card{transition-delay:calc(.08s + var(--delay))}
        .idioma-values-2026__card:hover{transform:translateY(-8px);border-color:rgba(239,27,45,.28);box-shadow:0 26px 70px rgba(23,31,58,.16)}
        .idioma-values-2026__card-head{position:relative;display:grid;place-items:center;gap:.75rem;min-height:128px;padding:1.35rem 1rem;background:linear-gradient(135deg,#fff0f2,#f7e7ea);color:var(--values-red);text-align:center;overflow:hidden}
        .idioma-values-2026__card-head::after{content:"";position:absolute;right:-34px;top:-34px;width:86px;height:86px;border-radius:999px;background:rgba(239,27,45,.08);transition:transform .35s ease}
        .idioma-values-2026__card:hover .idioma-values-2026__card-head::after{transform:scale(1.5)}
        .idioma-values-2026__card-head i{font-size:2.15rem;transition:transform .28s ease}
        .idioma-values-2026__card:hover .idioma-values-2026__card-head i{transform:translateY(-3px) scale(1.08)}
        .idioma-values-2026__card h3{margin:0;color:var(--values-red);font-size:1.35rem;line-height:1.18;font-weight:950;letter-spacing:0}
        .idioma-values-2026__card-body{display:grid;align-content:center;justify-items:center;padding:1.4rem 1rem;text-align:center}
        .idioma-values-2026__card-body span{color:#858b98;font-size:.86rem;font-weight:800;line-height:1.25}
        .idioma-values-2026__card-body strong{display:block;margin:.18rem 0 1rem;color:#5d6571;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1;font-weight:950}
        .idioma-values-2026__card-body em{display:block;margin:.18rem 0 0;color:var(--values-red);font-size:1.55rem;font-style:normal;font-weight:950;line-height:1}
        .idioma-values-2026__card footer{display:flex;align-items:center;justify-content:center;gap:.48rem;min-height:58px;padding:.9rem 1rem;border-top:1px solid var(--values-line);color:#59606f;font-weight:900}
        .idioma-values-2026__card footer i{color:var(--values-red)}
        .idioma-values-2026__discount{width:min(840px,100%);margin:clamp(2.6rem,5vw,4rem) auto 0;padding:clamp(1.2rem,2.4vw,1.7rem);border:1px solid #e0e3ea;border-radius:8px;background:#fff;box-shadow:0 18px 52px rgba(23,31,58,.11);opacity:1;transform:none;transition:opacity .65s ease .15s,transform .65s ease .15s}
        .idioma-values-2026:not(.is-ready) .idioma-values-2026__discount{opacity:0;transform:translateY(24px)}
        .idioma-values-2026__discount h2{display:flex;align-items:center;gap:.65rem;margin:0 0 .85rem;color:var(--values-red);font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:950;letter-spacing:0}
        .idioma-values-2026__discount h2 i{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--values-red);color:#fff;font-size:.95rem}
        .idioma-values-2026__discount ul{margin:.8rem 0 0;padding-left:1.25rem;color:#5b6474;line-height:1.65}
        .idioma-values-2026__discount li::marker{color:var(--values-red)}
        .idioma-values-2026__services{margin-top:clamp(2.8rem,6vw,4.5rem)}
        .idioma-values-2026__service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
        .idioma-values-2026__service-card{position:relative;display:grid;place-items:center;gap:.8rem;min-height:200px;padding:1.35rem 1rem;border:1px solid var(--values-line);border-radius:8px;background:#fff;text-align:center;box-shadow:0 16px 42px rgba(23,31,58,.1);opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden}
        .idioma-values-2026__service-card::after{content:"";position:absolute;inset:auto 18% -46px;height:72px;border-radius:50%;background:rgba(239,27,45,.1);filter:blur(8px);transition:transform .3s ease,opacity .3s ease}
        .idioma-values-2026__service-card:hover{border-color:rgba(239,27,45,.28)}
        .idioma-values-2026__service-card:hover::after{transform:translateY(-12px);opacity:.85}
        .idioma-values-2026:not(.is-ready) .idioma-values-2026__service-card{opacity:0;transform:translateY(22px)}
        .idioma-values-2026.is-ready .idioma-values-2026__service-card{transition-delay:calc(.18s + var(--delay))}
        .idioma-values-2026__service-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(23,31,58,.15)}
        .idioma-values-2026__service-card i{color:var(--values-red);font-size:2.35rem}
        .idioma-values-2026__service-card h3{margin:0;color:var(--values-red);font-size:1.05rem;font-weight:950;line-height:1.2}
        .idioma-values-2026__service-card strong{display:block;color:#5d6571;font-size:2rem;font-weight:950;line-height:1}
        .idioma-values-2026__alert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;margin-top:clamp(2.2rem,5vw,3.6rem);padding:1.25rem 1.35rem;border:1px solid rgba(239,27,45,.24);border-radius:8px;background:linear-gradient(135deg,#fff1f3,#ffe6e9);color:#7b2630;box-shadow:0 18px 46px rgba(239,27,45,.12)}
        .idioma-values-2026__alert > i{color:var(--values-red);font-size:2.3rem}
        .idioma-values-2026__alert h3{margin:0;color:var(--values-red);font-size:1.15rem;font-weight:950}
        .idioma-values-2026__alert p{margin:.2rem 0 0;line-height:1.55}
        .idioma-values-2026__cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:8px;background:var(--values-red);color:#fff!important;text-decoration:none!important;padding:.78rem 1rem;font-weight:950;white-space:nowrap;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
        .idioma-values-2026__cta:hover{background:var(--values-red-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(239,27,45,.24)}
        @keyframes valuesFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(3deg)}}
        @keyframes valuesCardIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
        @media (max-width:980px){.idioma-values-2026__courses{grid-template-columns:repeat(2,minmax(0,1fr))}.idioma-values-2026__service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.idioma-values-2026__alert{grid-template-columns:1fr}.idioma-values-2026__cta{width:max-content}}
        @media (max-width:600px){.idioma-values-2026__wrap{width:min(100% - 1rem,1220px);padding-top:2rem}.idioma-values-2026__courses,.idioma-values-2026__service-grid{grid-template-columns:1fr}.idioma-values-2026__card{min-height:300px}.idioma-values-2026__hero h1{font-size:clamp(2.15rem,12vw,3rem)}.idioma-values-2026__cta{width:100%}}
        @media (prefers-reduced-motion:reduce){.idioma-values-2026 *{animation:none!important;transition:none!important}.idioma-values-2026__hero,.idioma-values-2026__discount,.idioma-values-2026__service-card{opacity:1!important;transform:none!important}}
      </style>
      <main class="idioma-values-2026__wrap">
        <header class="idioma-values-2026__hero">
          <div class="idioma-values-2026__money" aria-hidden="true">$</div>
          <h1>Tabla de Valores 2026</h1>
          <p>Consulta nuestras tarifas para cursos y servicios. Invierte en tu futuro bilingüe con nosotros.</p>
        </header>

        <section aria-labelledby="valores-cursos-title">
          <h2 class="idioma-values-2026__section-title" id="valores-cursos-title">Cursos Regulares y Programas</h2>
          <div class="idioma-values-2026__courses">
            ${courseCards}
          </div>
        </section>

        <section class="idioma-values-2026__discount" aria-labelledby="valores-descuento-title">
          <h2 id="valores-descuento-title"><i class="fa fa-percent" aria-hidden="true"></i> Descuento por Proyección Social</h2>
          <ul>
            <li>Egresados de la Universidad de los Llanos.</li>
          </ul>
        </section>

        <section class="idioma-values-2026__services" aria-labelledby="valores-servicios-title">
          <h2 class="idioma-values-2026__section-title" id="valores-servicios-title">Otros Servicios</h2>
          <div class="idioma-values-2026__service-grid">
            ${serviceCards}
          </div>
        </section>

        <aside class="idioma-values-2026__alert" aria-label="Información importante">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
          <div>
            <h3>Información Importante</h3>
            <p>Los valores presentados son de referencia y corresponden al año 2027. Podrían estar sujetos a cambios y actualizaciones según las políticas de la Universidad de los Llanos. Para confirmar tarifas y obtener información detallada, por favor contáctanos.</p>
          </div>
          <a class="idioma-values-2026__cta" href="/plantillajoomla5.3/index.php/nosotros/contacto">Contactar Ahora</a>
        </aside>
      </main>`;

    window.requestAnimationFrame(() => app.classList.add('is-ready'));
  };

  apps.forEach(render);
}());