Flami - Flamingo Agency

Flami

Cómo empezó todo

¿Qué es Flami?

Flami es un proyecto creado por Aldana, una sexóloga reconocida, con una idea muy clara desde el inicio: construir un espacio profesional para hablar, enseñar y formar sobre temas que todavía siguen siendo tabú para muchas personas.

Aldana llegó a Flamingo recomendada por uno de nuestros grandes colegas y amigo, Gabriel. Tenía el nombre, tenía el objetivo y tenía algo muy importante: una voz propia. Flami no quería ser provocación vacía ni discurso solemne, sino un lugar cuidado, sensible y honesto desde donde comunicar.

El problema

¿Por qué nos contrataron?

Flami existía como idea, pero no como marca. No había una identidad que acompañara el proyecto ni una estructura digital capaz de sostener cursos, charlas y contenidos formativos de manera profesional.

El desafío era grande: crear algo atrevido sin ser agresivo, sensible sin ser ingenuo y equilibrado sin quedarse quieto. Además, el proyecto necesitaba una plataforma donde alojar formaciones, cursos, artículos y contenidos educativos sin perder claridad ni coherencia.

Cómo lo resolvimos

¿Cómo ayudamos a Aldana?

Trabajamos primero en el diseño de la identidad de marca, buscando un lenguaje visual que exprese la voz de Aldana: cercana, cuidada, en movimiento y con personalidad. Un diseño que acompañe el contenido sin suavizarlo ni exagerarlo.

Luego desarrollamos una plataforma de e-learning, pensada para alojar y vender cursos, formaciones y contenidos educativos de forma ordenada y accesible. El resultado fue un sistema claro, funcional y alineado con la identidad del proyecto.

El trabajo fluyó desde el inicio. Conectamos rápido con lo que Aldana estaba buscando y logramos construir una marca que expresa su mensaje con sensibilidad, cuidado y carácter, sin perder esa “Flami” que define al proyecto desde el primer día.

¿Como-ayudamos-a-aldana_.webp

¿Como-ayudamos-a-aldana_-1.webp

¿Como-ayudamos-a-aldana_-2.webp

¿Como-ayudamos-a-aldana_-3.webp

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'; });});