Instituto Argentino de Musicales

Cómo empezó todo

¿Qué es IAM?

IAM es un espacio de formación y profesionalización artística especializado en Teatro Musical, dirigido por Ricky Pashkus y Fer Dente. Con propuestas para niños, adolescentes y adultos, ofrece programas de formación integral, seminarios y experiencias intensivas para artistas que buscan desarrollar su potencial y prepararse para el mundo profesional.

Con una trayectoria consolidada y una comunidad en constante crecimiento, IAM necesitaba que su presencia digital estuviera a la altura de la experiencia que ofrece fuera de la pantalla.

Qué necesitaba IAM (1)
Qué necesitaba IAM

El problema

¿Por qué nos contrataron?

Después de años de trabajar junto a IAM, llegó el momento de repensar su ecosistema digital desde cero. La web necesitaba modernizarse, ordenar la gran cantidad de información disponible y, sobre todo, acompañar de manera más eficiente el proceso de inscripción a sus programas.

El desafío no era solamente visual. También había procesos administrativos que requerían intervención manual y una experiencia de inscripción que podía simplificarse. IAM necesitaba una plataforma capaz de centralizar sus propuestas, facilitar los pagos y adaptarse a una institución con múltiples programas, sedes, edades, cupos y modalidades.

Cómo lo resolvimos

¿Cómo ayudamos a IAM?

Diseñamos y desarrollamos una nueva web desde cero, con una estructura más clara, una experiencia de navegación más simple y una plataforma preparada para acompañar el crecimiento de IAM.

Integramos Mercado Pago como medio de pago para las inscripciones, simplificando el proceso para los alumnos y centralizando la gestión. También automatizamos procesos que antes requerían seguimiento manual: cuando un programa alcanza su cupo, la web lo identifica automáticamente como agotado y restringe nuevas inscripciones.

El resultado es una plataforma más moderna, funcional y eficiente, que no solo comunica lo que IAM ofrece, sino que también se ocupa de una parte del trabajo detrás de escena.

Cómo ayudamos a iam
Cómo ayudamos a iam (1)
Cómo ayudamos a iam (2)

Diseño responsive

") O en un plugin tipo "Insert Headers and Footers" ============================================ */document.addEventListener('DOMContentLoaded', function () {/* 1. Crear los elementos del cursor una sola vez */ var glow = document.createElement('div'); glow.id = 'custom-cursor-glow'; document.body.appendChild(glow);var cursor = document.createElement('div'); cursor.id = 'custom-cursor'; cursor.innerHTML = ''; document.body.appendChild(cursor);var cursorIcon = cursor.querySelector('i'); var cursorText = cursor.querySelector('span');/* 2. Config por variante: tamaño del circulo y tamaño de fuente al activarse */ var VARIANT_SIZE = { 'cursor-solid': 72, 'cursor-gradient': 72, 'cursor-glass': 66, 'cursor-outline': 66, 'cursor-square': 80, 'cursor-blur': 74, 'cursor-glow': 60, 'cursor-icon': 76 }; var VARIANT_FONT = { 'cursor-solid': 11, 'cursor-gradient': 11, 'cursor-glass': 11, 'cursor-outline': 10, 'cursor-square': 11, 'cursor-blur': 10, 'cursor-glow': 11, 'cursor-icon': 9 }; var ALL_VARIANTS = Object.keys(VARIANT_SIZE);/* 3. Movimiento con retardo (lerp) */ var mouseX = 0, mouseY = 0; var curX = 0, curY = 0; var ease = 0.16; var currentSize = 0; var targetSize = 0; var glowExtra = 30;document.addEventListener('mousemove', function (e) { mouseX = e.clientX; mouseY = e.clientY; });function loop() { curX += (mouseX - curX) * ease; curY += (mouseY - curY) * ease; currentSize += (targetSize - currentSize) * ease;cursor.style.opacity = currentSize > 0.5 ? '1' : '0'; cursor.style.width = currentSize + 'px'; cursor.style.height = currentSize + 'px'; cursor.style.transform = 'translate(' + (curX - currentSize / 2) + 'px,' + (curY - currentSize / 2) + 'px)'; var glowSize = currentSize > 0 ? currentSize + glowExtra : 0; glow.style.width = glowSize + 'px'; glow.style.height = glowSize + 'px'; glow.style.transform = 'translate(' + (curX - glowSize / 2) + 'px,' + (curY - glowSize / 2) + 'px)';requestAnimationFrame(loop); } loop();/* 4. Detectar hover sobre cualquier elemento con alguna clase cursor-* */ var selector = ALL_VARIANTS.map(function (v) { return '.' + v; }).join(', ');document.addEventListener('mouseover', function (e) { var target = e.target.closest(selector); if (!target) return;var variant = ALL_VARIANTS.find(function (v) { return target.classList.contains(v); }); if (!variant) return;/* limpia variantes anteriores y aplica la actual */ ALL_VARIANTS.forEach(function (v) { cursor.classList.remove(v); }); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); cursor.classList.add(variant); document.body.classList.add(variant, '__active'); target.classList.add('__active');targetSize = VARIANT_SIZE[variant] || 70;var text = target.getAttribute('data-cursor-text') || ''; var iconClass = target.getAttribute('data-cursor-icon') || ''; cursorText.textContent = text; cursorText.style.fontSize = text ? (VARIANT_FONT[variant] || 11) + 'px' : '0px'; cursorIcon.className = iconClass; cursorIcon.style.fontSize = iconClass ? (variant === 'cursor-icon' ? 16 : 14) + 'px' : '0px'; });document.addEventListener('mouseout', function (e) { var target = e.target.closest(selector); if (!target) return; var related = e.relatedTarget; if (related && target.contains(related)) return;target.classList.remove('__active'); document.body.classList.remove('__active'); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); targetSize = 0; cursorText.style.fontSize = '0px'; cursorIcon.style.fontSize = '0px'; });});