Sistema de Identidad de Marca — Academia.Marketing™️
Datos fundamentales del cliente, identidad visual actual, servicios y estructura digital.
| Campo | Valor |
|---|---|
| Nombre | Academia.Marketing™️ |
| Web | https://academia.marketing |
| Teléfono | (442) 926-7001 |
| Ubicación | Islas Baleares 51, interior 3, Bosques del Acueducto, Santiago de Querétaro, Querétaro, México. 76120 |
| Tipo | Academia de Marketing Digital / Cursos online con certificación STPS DC-3 |
| Propietario | Manuel Montiel Lara (también ManuelMontiel.com) |
| Plataforma | LeadConnector / GoHighLevel + INBOUND Software |
| Elemento | Detalle |
|---|---|
| Color Primario | #003468 Azul Marino Oscuro |
| Color Secundario | #FF7F01 Naranja |
| Tipografía Headings | FuturaLT (H1, H3, H4) / Montserrat (H2) |
| Tipografía Body | Inter |
| Región | Precio Mensual | Precio Anual |
|---|---|---|
| Mexicanos | $375 MXN/mes | $4,500 MXN/año |
| Extranjeros | $20.83 USD/mes | $250 USD/año |
Facebook, Instagram, X/Twitter, LinkedIn, YouTube, TikTok, WhatsApp, Pinterest. Podcast en YouTube e iTunes.
| Ruta | Página | Estado |
|---|---|---|
/ | Home — contenido educativo sobre marketing | Activo |
/blog | Blog — 7+ artículos publicados | Activo |
/podcast | Podcast — Digital Boosters + software info | Activo |
/software | Software — INBOUND features | Activo |
/cursos | Cursos | 404 |
/comunidad | Comunidad | 404 |
Academia.Marketing opera en el mercado mexicano de educación en marketing digital con una propuesta de valor centrada en cursos con validez STPS/DC-3 a un precio altamente competitivo ($375 MXN/mes ≈ $20.83 USD/mes).
Academia.Marketing es el único competidor que ofrece certificación oficial STPS/DC-3 en marketing digital a un precio menor a $500 MXN/mes. Esta es una ventaja diferenciadora significativa.
| # | Competidor | Tipo de Cursos | Precios (MXN/USD) | Certificación STPS | Diferenciación vs Academia.Marketing |
|---|---|---|---|---|---|
| 1 | Platzi | Escuela digital: 1600+ cursos | Basic: $49 USD/mes (~$950 MXN). Expert: $199 USD/año (~$330 MXN/mes) | ❌ No | Precio similar en Expert, sin certificación STPS. Audiencia tech/joven. |
| 2 | Crehana | Cursos creativos y digitales | $19.99 USD/mes (~$390 MXN/mes) | ❌ No | Precio comparable, branding artístico/creativo. Sin STPS. |
| 3 | HubSpot Academy | Certificaciones gratuitas inbound | GRATIS ($200 USD/examen) | ❌ No | Gratuito de alta calidad, pero sin validez oficial. |
| 4 | Google Skillshop | Certificaciones Google | GRATIS | ❌ No | Gratuito pero sin DC-3. Formato autodidacta. |
| 5 | Coursera | Cursos universitarios | $59 USD/mes (~$1,150 MXN/mes) | ❌ No | Precio más alto. Enfoque académico. Sin STPS. |
| 6 | Udemy | Cursos individuales | $9.99–$199.99 USD/curso | ❌ No | Pago por curso. Calidad variable. Sin validez oficial. |
| 7 | Capacítate (F. Carlos Slim) | Cursos gratuitos laborales | GRATIS | Sí (constancia no DC-3) | Gratuito. Constancia no es DC-3 oficial. |
| 8 | Academias locales Querétaro | Cursos presenciales | $2,000–$8,000 MXN/curso | Varía | Precios altos, modalidad presencial. |
★ Academia.Marketing se posiciona en el cuadrante "mejor valor": bajo precio + buena calidad con certificación STPS.
Conclusión: Academia.Marketing ocupa un espacio único como la única opción con certificación oficial STPS especializada en marketing digital.
Academia.Marketing se alinea fundamentalmente con el arquetipo del Sabio (Sage). Su razón de ser es la transmisión de conocimiento estructurado, verificable y aplicable. No busca entretener, inspirar aspiraciones vacías ni promover un estatus — busca iluminar, clarificar y certificar el dominio del marketing digital.
| Dimensión | Evidencia |
|---|---|
| Nombre de marca | "Academia" — la institución clásica del saber. Rigor intelectual, estructura curricular, conocimiento formal. |
| Tono del sitio | Contenido educativo extenso, tono académico-profesional. No hay promesas mágicas. |
| Certificación STPS/DC-3 | Reconocimiento de competencias laborales validado por el Estado mexicano. |
| Propietario | Manuel Montiel Lara — figura de autoridad educativa, no influencer. El Mentor-Sabio que guía. |
| Ecosistema | Cursos + Podcast + Blog + Software + Comunidad = ecosistema de aprendizaje. |
| Precio | $375 MXN/mes — accesible, democrático. El Sabio cree que el conocimiento debe estar al alcance de todos. |
Academia.Marketing es el profesor universitario que también ha trabajado en agencia. Sabe la teoría porque la vivió en las aulas, pero conoce la práctica porque ha sudado campañas. No te promete riqueza instantánea: te promete conocimiento que puedes demostrar con un certificado oficial. Habla claro, cobra justo y no te suelta la mano hasta que apruebas.
"La única academia de marketing digital en México que combina certificación oficial STPS/DC-3, precio accesible y un ecosistema completo de aprendizaje práctico."
Para profesionales y emprendedores mexicanos que necesitan formación en marketing digital con validez oficial, Academia.Marketing es la academia online que ofrece cursos con certificación STPS/DC-3 a un precio accesible de $375 MXN/mes, a diferencia de plataformas como Platzi, Crehana, Coursera o HubSpot Academy, que ofrecen certificaciones sin validez oficial STPS, o academias presenciales que cobran $2,000–$8,000 MXN por curso, porque Academia.Marketing combina un currículum 100% enfocado en marketing digital, certificación laboral reconocida por la Secretaría del Trabajo, acompañamiento pedagógico y un ecosistema integral.
"La única academia de marketing digital con certificación oficial STPS"
Edad: 28–40 años · Ubicación: Querétaro, CDMX, Guadalajara, Monterrey · Ocupación: Ejecutivo de marketing, community manager, coordinador digital, consultor independiente
"Yo ya sé manejar campañas de Google Ads y redes sociales. Pero cuando postulo a trabajos formales, me piden 'certificaciones comprobables'. Encontré Academia.Marketing y por fin puedo demostrar lo que sé con un papel que sí vale en México."
Edad: 35–50 años · Ubicación: Querétaro, Bajío · Ocupación: Dueña de PyME (catering, comercio, servicios)
"Llevo 8 años con mi negocio de catering y siempre publicaba en Facebook sin saber si servía de algo. Me di cuenta de que necesito entender esto, no puedo dejar mi negocio en manos de la suerte digital."
Democratizar la certificación en marketing digital en México, ofreciendo formación práctica, accesible y con validez oficial STPS que impulse las carreras de los profesionales y el crecimiento de los negocios mexicanos.
Ser la academia de marketing digital con certificación oficial más grande y reconocida de México, formando a la próxima generación de profesionales certificados que transformen el panorama digital del país.
Solo ofrecemos certificaciones que abren puertas laborales — respaldadas por la STPS.
Cada curso termina con el estudiante listo para ejecutar campañas reales.
$375/mes para que cualquier mexicano pueda certificarse.
Hecho en Querétaro. Pensado para México. No somos una traducción.
Eres parte de una comunidad de aprendizaje con guía y apoyo.
No prometemos resultados mágicos. Prometemos conocimiento verificable.
El marketing digital en México ha estado atrapado entre dos mentiras:
La mentira de los cursos caros que prometen el éxito pero solo entregan deudas.
La mentira de las certificaciones gratuitas que parecen valiosas pero no pesan en una entrevista de trabajo.Nosotros creemos en una tercera vía.
Creemos que el conocimiento debe ser accesible, pero no barato en calidad.
Creemos que una certificación debe tener peso legal, no solo estético.
Creemos que la mejor manera de aprender marketing digital es hacerlo — con herramientas reales, campañas reales, resultados reales.Bienvenido a Academia.Marketing.
Donde aprender marketing digital no es un lujo — es una certificación oficial que te pertenece.— Manuel Montiel Lara, Fundador
Colores extraídos del sitio real https://academia.marketing mediante inspección directa de CSS. Auditoría de accesibilidad WCAG AA incluida.
Header (izq.) y Footer (der.) — Gradiente: #003468 → #00D4FF → #FFFFFF
| Texto | Fondo | Ratio | WCAG AA (normal) | WCAG AA (grande) |
|---|---|---|---|---|
| #000000 | #FFFFFF | 21.0:1 | ✅ Pasa | ✅ Pasa |
| #FFFFFF | #003468 | 12.41:1 | ✅ Pasa | ✅ Pasa |
| #000000 | #FF7F01 | 8.29:1 | ✅ Pasa | ✅ Pasa |
| #000000 | #37CA37 | 9.54:1 | ✅ Pasa | ✅ Pasa |
| #FFFFFF | #188BF6 | 3.46:1 | ❌ No pasa | ✅ Pasa |
| #FFFFFF | #FF7F01 | 2.53:1 | ❌ No pasa | ❌ No pasa |
⚠️ Hallazgo crítico: El color naranja (#FF7F01) y verde (#37CA37) fracasan WCAG AA cuando se usan como fondo con texto blanco encima. Solución: Usar siempre texto negro (#000000) sobre estos fondos de color.
| Color | Rol | Dónde usarlo |
|---|---|---|
| #003468 | Azul Marino (Primary) | Header, footer, fondos oscuros, marca principal. Texto blanco obligatorio. |
| #FF7F01 | Naranja (Secondary) | Botones principales, CTAs, headlines destacados. Texto negro obligatorio. |
| #37CA37 | Verde (Acento) | Indicadores de éxito, bordes outline, checkmarks, acentos secundarios. Texto negro encima. |
| #188BF6 | Azul (Acento) | Links, iconografía informativa, elementos de confianza. |
| #FFFFFF | Blanco | Fondos de página, tarjetas, popups, contenedores. |
| #000000 | Negro | Texto body principal, headings. |
El logotipo de Academia.Marketing combina un isotipo (ícono) y logotipo (texto) con paleta anaranjada (#FF7F01) y blanca (#FAFAFA).
Logotipo Real — Academia.Marketing (generado vía logo-variant-normalization)
Original (Color)
Transparente
Fondo oscuro
Fondo claro
Monocromático negro
Monocromático blanco
| Versión | Colores | Relación de aspecto | Uso |
|---|---|---|---|
| Original (Color) | Naranja #FF7F01, Blanco #FAFAFA | 3.72:1 (998×268 px) | Sobre fondos blancos o grises muy claros |
| Fondo oscuro | Acento naranja, texto claro | 3.72:1 | Sobre fondos oscuros o de color |
| Fondo claro | Acento naranja, texto oscuro | 3.72:1 | Sobre fondos claros |
| Blanco | #FFFFFF | 3.72:1 | Sobre fondos oscuros o de color |
| Negro | #000000 | 3.72:1 | Sobre fondos muy claros (B&W) |
El área de resguardo mínima equivale al 10% de la altura total del logotipo en todos sus lados. Para el logo a 268 px de alto: ≈ 27 px de margen mínimo.
| Formato | Ancho mínimo | Alto mínimo |
|---|---|---|
| Digital (pantalla) | 140 px | ~38 px |
| Impreso | 25 mm | ~7 mm |
| Fondo | Logo Color | Logo Blanco | Logo Negro |
|---|---|---|---|
| Blanco #FFFFFF | ✅ Recomendado | ❌ No visible | ✅ Recomendado |
| Gris claro 10% #E6E6E6 | ✅ Recomendado | ❌ Bajo contraste | ✅ Recomendado |
| Gris medio #808080 | ⚠️ Bajo contraste | ✅ Recomendado | ❌ No visible |
| Negro #141414 | ❌ No visible | ✅ Recomendado | ❌ No visible |
Combinación sans-serif: FuturaLT para headings (H1, H3, H4), Montserrat para H2, Inter para botones y UI. Inspirado en tipografía real del sitio.
| Elemento | Fuente | Categoría | Licencia |
|---|---|---|---|
| Headings (h1, h3, h4) | FuturaLT | Sans-serif geométrica | Comercial (Linotype) |
| Heading (h2) | Montserrat | Sans-serif geométrica | ✅ Google Fonts gratuita |
| Botones / CTAs | Inter | Sans-serif funcional | ✅ Google Fonts gratuita |
| Body / párrafos | Inter | Sans-serif funcional | ✅ Google Fonts gratuita |
| Navegación | Montserrat | Sans-serif | ✅ Google Fonts gratuita |
No hay una alternativa gratuita exacta en Google Fonts. FuturaLT es una fuente comercial de Linotype. Para entornos web donde no se tenga licencia, usar Montserrat como respaldo para headings, manteniendo la jerarquía tipográfica definida.
| Nivel | Fuente | Tamaño Desktop | Tamaño Mobile | Peso | Line-height | Uso |
|---|---|---|---|---|---|---|
| h1 | FuturaLT | 48–56px (3–3.5rem) | 32px (2rem) | Bold (700) | 1.1 | Título principal (Hero) |
| h2 | Montserrat | 36–40px (2.25–2.5rem) | 26px (1.625rem) | Bold (700) | 1.2 | Título de sección |
| h3 | FuturaLT | 26–30px (1.625–1.875rem) | 22px (1.375rem) | Medium/SemiBold (500–600) | 1.3 | Subtítulo de sección |
| h4 | FuturaLT | 20–22px (1.25–1.375rem) | 18px (1.125rem) | Medium (500) | 1.4 | Encabezado de tarjeta |
| Body | Inter | 18px (1.125rem) | 16px (1rem) | Regular (400) | 1.6–1.7 | Texto de lectura |
| Small | Inter | 14px (0.875rem) | 13px (0.8125rem) | Regular (400) | 1.5 | Metadatos, fechas |
| Botones CTA | Inter | 16–18px (1–1.125rem) | 15px (0.9375rem) | Bold (700) | 1.2 | Llamados a la acción |
| Nav menu | Montserrat | 16px (1rem) | 14px (0.875rem) | Bold (700) | 1.5 | Enlaces de navegación |
| Fuente | Pesos | Uso recomendado |
|---|---|---|
| FuturaLT | Light (300), Book (400), Medium (500), Demi (600), Bold (700), Heavy (800) | H1/H3/H4: Bold (700) o Demi (600) |
| Montserrat | Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900) | H2: Bold (700). Nav: SemiBold (600) o Bold (700) |
| Inter | Thin (100), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900) | Body: Regular (400). Botones: Bold (700). Small: Medium (500) |
:root {
--font-headings: 'FuturaLT', 'Futura LT', 'FuturalLT', Montserrat, 'Segoe UI', sans-serif;
--font-h2: 'Montserrat', 'FuturaLT', 'Futura LT', sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-ui: 'Inter', 'Segoe UI', sans-serif;
--font-nav: 'Montserrat', 'Inter', 'Segoe UI', sans-serif;
--text-h1: clamp(2rem, 5vw, 3.5rem); /* 32–56px */
--text-h2: clamp(1.625rem, 4vw, 2.5rem); /* 26–40px */
--text-h3: clamp(1.375rem, 3vw, 1.875rem); /* 22–30px */
--text-body: clamp(1rem, 1.5vw, 1.125rem); /* 16–18px */
--text-small: clamp(0.8125rem, 1vw, 0.875rem); /* 13–14px */
}
Academia.Marketing se expresa a través de 5 atributos de personalidad que emanan del arquetipo principal (Sabio → Mentor → Ciudadano).
| # | Atributo | Arquetipo Fuente | ¿Qué significa en copy? |
|---|---|---|---|
| 1 | 🔬 Sabio (Experto) | Sabio (Sage) | Habla con autoridad sin arrogancia. Usa datos, hechos, referencias oficiales (STPS, DC-3). |
| 2 | 🎓 Educador (Mentor) | Mentor | Enseña con estructura: concepto → ejemplo → aplicación. Anticipa preguntas. |
| 3 | 🤝 Cercano (Accesible) | Ciudadano | Habla de tú. Usa lenguaje mexicano cotidiano. Se pone al nivel del estudiante. |
| 4 | 💪 Inspirador (Motivacional realista) | Sabio + Mentor | Inspira con posibilidades reales, no con promesas vacías. |
| 5 | 🇲🇽 Orgulloso (Mexicano auténtico) | Ciudadano | Reconoce el contexto mexicano: STPS, precio MXN, referencias locales. |
"Somos el profesor que también ha estado en trinchera: sabe la teoría, conoce la práctica, cobra justo y no te suelta la mano hasta que obtienes tu certificación."
| Palabras SÍ ✅ | Palabras NO ❌ |
|---|---|
| Certificación / DC-3 / STPS | Hack / Growth hack |
| Marketing digital | Hazte rico / Fácil / Rápido |
| Resultados / Práctico / Aplicable | Mágico / Secreto |
| Oficial / Validez oficial | Viral / Viralizar |
| A tu ritmo / Paso a paso | Disruptivo / Garantizado |
| Inversión (no "gasto") | Infoproducto / Dinero fácil |
| México / Mexicano / Querétaro | Master (anglicismo) |
| Comunidad / Aprendizaje | Transforma tu vida |
La única certificación STPS en marketing digital que cabe en tu bolsillo
6 cursos prácticos. 100% online. Certificación oficial con validez laboral en México.
Desde $375 MXN al mes.
VER CURSOS CERTIFICADOSSabes hacer marketing. Ahora demuéstralo.
Convierte tu experiencia en una certificación oficial STPS/DC-3 que los reclutadores sí reconocen.
QUIERO CERTIFICARME📌 ¿Sabes qué diferencia a un profesional de marketing certificado de uno que no lo está?
No es el talento. No es la experiencia. Es un papel que dice "esto sí vale" cuando un reclutador lo revisa.
6 cursos. 100% online. $375 MXN al mes. Con validez oficial.
#MarketingDigital #CertificaciónSTPS #AcademiaMarketing #CursosOnlineMexico
Qué es el DC-3 y por qué tu certificación de marketing digital necesita tenerlo
El DC-3 es la constancia oficial que emite la Secretaría del Trabajo y Previsión Social (STPS) para reconocer competencias laborales. No es un "certificado de curso" genérico — es un documento con validez legal que avala que tienes las habilidades para desempeñar un trabajo específico.
CONOCE LOS CURSOS CON CERTIFICACIÓN DC-3Asunto: Bienvenido a Academia.Marketing — tu certificación empieza aquí
Gracias por registrarte. Déjame contarte cómo funciona esto:
1. Eliges tu curso. Funnels, Google Ads, Retargeting, ChatGPT, Redes Sociales o Creación de Cursos. Todos incluyen certificación STPS/DC-3.
2. Avanzas a tu ritmo. Online, sin horarios fijos.
3. Te certificas. Al completar el curso, recibes tu constancia DC-3 con validez oficial.
COMENZAR MI CERTIFICACIÓN| Intención | CTA Primario | CTA Secundario |
|---|---|---|
| Certificarse | Obtén tu certificación STPS | Quiero mi DC-3 |
| Inscribirse | Empieza hoy por $375/mes | Inscríbete ahora |
| Explorar cursos | Ver programas de estudio | Conoce los 6 cursos |
| Lead magnet | Descarga la guía gratuita | Recibe el PDF por correo |
| Contacto | Habla con nosotros | Resuelve tus dudas |
| Compra corporativa | Capacita a tu equipo | Cotiza para tu empresa |
Apelación principal: Credibilidad profesional + ventaja competitiva.
Dolor: "Sé hacerlo pero no puedo demostrarlo".
Ejemplo de copy: "Tienes la experiencia. Ahora tienes la certificación que la respalda. Tu próximo empleador no pedirá más."
Apelación principal: Control + resultados prácticos para su negocio.
Dolor: "Gasto en anuncios y no sé si funcionan".
Ejemplo de copy: "Tu negocio merece clientes que lleguen solos. Aprende a hacerlo sin pagar agencia ni depender de nadie."
Aplicaciones digitales y offline de la identidad visual de Academia.Marketing: cursos, software INBOUND, podcast, blog, redes sociales, tarjetas, membresías y merchandising.
Tarjetas visuales para cada uno de los 6 cursos con certificación STPS/DC-3.
| Curso | Color Icono | Icono |
|---|---|---|
| Funnels de Marketing y Ventas | #37CA37 | 🚀 |
| Google Search Ads | #188BF6 | 🎯 |
| Retargeting en Google y Meta | #FF7F01 | 🔄 |
| ChatGPT Aplicado al Marketing | #37CA37 | 🤖 |
| Dominación de Redes Sociales | #188BF6 | 📱 |
| Certificación Creación de Cursos | #003468 | 🎓 |
Aprende a construir embudos de ventas que convierten. Desde la atracción hasta el cierre.
Desde $375/mes · 4 módulos
Configura campañas de búsqueda desde cero. Elige palabras clave y optimiza tu presupuesto.
Desde $375/mes · 4 módulos
CRM con landing pages, funnels, email marketing, chatbots, POS, ecommerce, agente virtual IA, redes sociales y analytics. UI con sidebar #003468, canvas #F5F7FA, botones primarios #37CA37 con texto negro.
"Digital Boosters: Minutos de Marketing" — disponible en YouTube, iTunes, RSS, Spotify. Portada con gradiente #003468 → #00D4FF.
Artículos en /blog con header gradiente, body en Times New Roman 18px, headings Futura PT. Categorías con badge verde, links en azul #188BF6, blockquotes con borde verde #37CA37, CTAs naranja con texto negro.
Mockups visuales de publicaciones en diferentes plataformas usando la identidad de marca.
Configura campañas de búsqueda desde cero. Elige palabras clave. Optimiza tu presupuesto. Obtén tu DC-3.
4 módulos · Online · $375/mes
Gracias por registrarte. Déjame contarte cómo funciona esto:
1. Eliges tu curso. Funnels, Google Ads, Retargeting, ChatGPT, Redes Sociales o Creación de Cursos. Todos incluyen certificación STPS/DC-3.
2. Avanzas a tu ritmo. Online, sin horarios fijos.
3. Te certificas. Al completar el curso, recibes tu constancia DC-3 con validez oficial.
Academia.Marketing — Islas Baleares 51, Querétaro, México
| Tipo de Post | Fondo | Acento |
|---|---|---|
| Educativo / Tips | #003468 | #00D4FF texto |
| Promocional curso | Gradiente #37CA37 → #188BF6 | CTA #FF7F01 |
| Testimonial / Alumno | #FFFFFF | Borde #37CA37 |
| Podcast episodio | Gradiente #003468 → #00D4FF | Título #FFFFFF |
| Comunidad / Interacción | #FFFFFF | #188BF6 |
Papelería corporativa con la identidad visual oficial de Academia.Marketing. Todos los mockups usan el logotipo real.
Islas Baleares 51, Querétaro, MX
Lic. Roberto Valencia García
Director de Marketing · Empresa Ejemplo S.A. de C.V.
Estimado Roberto:
Nos complace presentarle nuestra oferta de capacitación corporativa con certificación oficial STPS/DC-3. En Academia.Marketing hemos desarrollado un programa integral de 6 cursos prácticos de marketing digital que su equipo puede completar 100% online, a su ritmo y con validez laboral oficial.
Adjunto a esta carta encontrará los temarios detallados de los cursos de Funnels de Marketing y Ventas, Google Search Ads, Retargeting en Google y Meta, ChatGPT Aplicado al Marketing, Dominación de Redes Sociales y Certificación en Creación e Impartición de Cursos.
Quedo a sus órdenes para agendar una llamada y definir los detalles de implementación para su organización.
Atentamente,
Manuel Montiel Lara
Fundador & Mentor · Academia.Marketing
manuel@academia.marketing · (442) 926-7001
ACADEMIA.MARKETING
Tarjeta de Presentación — Frontal
Logo original + datos de contacto
Tarjeta — Trasero
#003468 + logo-blanco.png
Certificado Físico
216×279mm · Blanco hueso · Logo original + sello STPS
| Papel Carta | 216 × 279 mm · Blanco hueso 120g |
| Tarjeta Presentación | 90 × 50 mm · Frente mate / Trasero brillo |
| Sobre | 241 × 114 mm · Kraft blanco #F5F0E8 |
| Membresía | 85 × 55 mm · PVC brillo · Impresión digital |
| Certificado | 216 × 279 mm · Papel seguridad · Folio único |
| Carpeta | 310 × 230 mm · Cartón forrado #003468 |
📐 Especificaciones técnicas para impresión
| Elemento | Colores | Logo |
|---|---|---|
| Bolígrafo | Cuerpo #003468, clip #37CA37 | Isotipo verde |
| Cuaderno | Portada #003468, espiral verde | Logo completo blanco |
| Playera | #FFFFFF o #003468 | Logo frontal pequeño |
| USB | #37CA37 con detalle #003468 | Logo grabado |
| Carpeta ejecutiva | #003468 con cinta verde | Logo relieve plateado |
| Bolsa ecológica | #FFFFFF con estampado #37CA37/#003468 | Logo + "Academia.Marketing" |
| Taza | #FFFFFF con detalles verde oscuro | Logo + "Digital Boosters" |
| Aplicación | Fondo principal | Texto | Logo usado | Acento CTA |
|---|---|---|---|---|
| Tarjeta curso | #FFFFFF | #000000 | Isotipo verde | #FF7F01 |
| Landing curso | Gradiente #003468→#00D4FF | #FFFFFF | Blanco | #FF7F01 |
| Certificado digital | #FFFFFF | #000000 | Verde completo | #37CA37 |
| Dashboard INBOUND | #003468 sidebar | #000000 / #FFFFFF | Isotipo verde | #37CA37 / #FF7F01 |
| Podcast portada | Gradiente #003468→#00D4FF | #FFFFFF | Blanco | #FF7F01 |
| Blog artículo | Gradiente + #FFFFFF | #000000 | Verde | #FF7F01 |
| Post redes | Variable según tipo | Variable | Verde o blanco | #FF7F01 |
| Tarjeta presentación | #FFFFFF / #003468 | #000000 / #FFFFFF | Verde / Blanco | Barra #37CA37 |
| Membresía física | #003468 + gradiente | #FFFFFF | Blanco | Banda #37CA37→#00D4FF |
Para cada nueva aplicación de marca, verificar:
Librería de componentes UI reutilizables con código copiable. Diseñados con la paleta oficial de Academia.Marketing.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-secondary btn-sm">Small</button>
<button class="btn btn-secondary btn-lg">Large</button>
<button class="btn btn-secondary" disabled>Disabled</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-outline btn-sm">Small</button>
<button class="btn btn-outline btn-lg">Large</button>
<button class="btn btn-outline" disabled>Disabled</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-ghost btn-sm">Small</button>
<button class="btn btn-ghost btn-lg">Large</button>
<button class="btn btn-ghost" disabled>Disabled</button>
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.55em 1.4em;border-radius:8px;font-family:'Times New Roman',serif;font-weight:700;font-size:0.9rem;letter-spacing:0.02em;cursor:pointer;border:2px solid transparent;transition:all 0.2s;text-transform:uppercase}
.btn-primary{background:#FF7F01;color:#000;border-color:#FF7F01}
.btn-primary:hover{background:#e67200;border-color:#e67200}
.btn-secondary{background:#37CA37;color:#000;border-color:#37CA37}
.btn-secondary:hover{background:#2db82d;border-color:#2db82d}
.btn-outline{background:transparent;color:#003468;border-color:#003468}
.btn-outline:hover{background:#003468;color:#fff}
.btn-ghost{background:transparent;color:#003468;border-color:transparent}
.btn-ghost:hover{background:#f0f0f0}
.btn-sm{font-size:0.75rem;padding:0.35em 1em}
.btn-lg{font-size:1.05rem;padding:0.7em 1.8em}
.btn:disabled{opacity:0.4;cursor:not-allowed}
<input class="ui-input" type="text" placeholder="Nombre completo">
<input class="ui-input" type="email" placeholder="correo@ejemplo.com">
<input class="ui-input" type="text" placeholder="Deshabilitado" disabled>
<textarea class="ui-textarea" placeholder="Escribe tu mensaje..."></textarea>
<select class="ui-select">
<option>Selecciona un curso</option>
<option>Funnels de Marketing y Ventas</option>
<option>Google Search Ads</option>
</select>
.ui-input,.ui-textarea{display:block;width:100%;padding:0.6em 0.9em;border:2px solid #CBD5E0;border-radius:8px;font-family:'Times New Roman',serif;font-size:0.9rem;color:#000;background:#fff;transition:border-color 0.2s}
.ui-input:focus,.ui-textarea:focus{outline:none;border-color:#37CA37;box-shadow:0 0 0 3px rgba(55,202,55,0.15)}
.ui-select{display:block;width:100%;padding:0.6em 0.9em;border:2px solid #CBD5E0;border-radius:8px;font-family:'Times New Roman',serif;font-size:0.9rem;background:#fff;appearance:none;cursor:pointer}
.ui-select:focus{outline:none;border-color:#37CA37;box-shadow:0 0 0 3px rgba(55,202,55,0.15)}
<div class="ui-card-sample ui-card-service">
<div class="uc-title">🚀 Funnels de Marketing</div>
<div class="uc-desc">Descripción del curso...</div>
<div class="uc-footer">
<button class="btn btn-primary btn-sm">INICIA AHORA</button>
</div>
</div>
<div class="ui-card-sample ui-card-testimonio">
<div class="uc-quote">"Texto del testimonio..."</div>
<div class="uc-author">— Nombre, Alumno</div>
</div>
<div class="ui-card-sample ui-card-perfil">
<div class="uc-avatar">ML</div>
<div class="uc-title">Manuel Montiel</div>
<div class="uc-role">Fundador</div>
</div>
.ui-card-sample{background:#fff;border:1px solid #CBD5E0;border-radius:12px;padding:1.25em;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.ui-card-sample .uc-title{font-family:'Futura PT','Futura LT',sans-serif;font-weight:700;font-size:1em;margin-bottom:0.4em}
.ui-card-sample .uc-desc{font-size:0.85em;color:#6A6A6A;line-height:1.5}
.ui-card-service{border-left:4px solid #37CA37}
.ui-card-testimonio{background:#f9f9f9;border-left:4px solid #FF7F01}
.ui-card-testimonio .uc-quote{font-style:italic;font-size:0.85em;color:#555}
.ui-card-testimonio .uc-author{font-weight:600;font-size:0.85em;color:#003468}
.ui-card-perfil{text-align:center;padding:1.5em}
.ui-card-perfil .uc-avatar{width:56px;height:56px;border-radius:50%;background:#37CA37;display:flex;align-items:center;justify-content:center;font-size:1.5em;color:#000;font-weight:700;margin:0 auto 0.75em}
.ui-card-perfil .uc-role{font-size:0.8em;color:#6A6A6A}
| Curso | Duración | Inversión | Certificación |
|---|---|---|---|
| Funnels de Marketing y Ventas | 4 módulos | $375/mes | STPS/DC-3 |
| Google Search Ads | 4 módulos | $375/mes | STPS/DC-3 |
| Retargeting en Google y Meta | 3 módulos | $375/mes | STPS/DC-3 |
| ChatGPT Aplicado al Marketing | 3 módulos | $375/mes | STPS/DC-3 |
| Dominación de Redes Sociales | 4 módulos | $375/mes | STPS/DC-3 |
<div class="ui-table-wrap">
<table>
<thead>
<tr><th>Curso</th><th>Duración</th><th>Precio</th><th>Cert</th></tr>
</thead>
<tbody>
<tr><td>Funnels</td><td>4 mod</td><td>$375/mes</td><td>STPS/DC-3</td></tr>
</tbody>
</table>
</div>
.ui-table-wrap{overflow-x:auto;margin:1em 0;border-radius:8px;border:1px solid #CBD5E0}
.ui-table-wrap table{width:100%;border-collapse:collapse;font-size:0.85rem;min-width:450px}
.ui-table-wrap thead{background:#003468;color:#fff}
.ui-table-wrap thead th{padding:0.7em 0.9em;text-align:left;font-family:'Futura PT',sans-serif;font-weight:600}
.ui-table-wrap tbody td{padding:0.6em 0.9em;border-bottom:1px solid #CBD5E0}
.ui-table-wrap tbody tr:nth-child(even){background:#f9f9f9}
💡 Cómo usar los componentes: Copia el HTML y CSS de cada componente directamente en tu proyecto. Todos los colores usan la paleta oficial de Academia.Marketing. Los estados :hover, :focus y :disabled están incluidos.
Diagnóstico profundo de la oferta actual de Academia.Marketing, propuesta de valor y estrategia de posicionamiento.
Academia.Marketing opera actualmente con un modelo híbrido de suscripción + cursos individuales. Su oferta se compone de:
| Componente | Descripción | Estado |
|---|---|---|
| 6 Cursos STPS/DC-3 | Funnels, Search Ads, Retargeting, ChatGPT, Redes Sociales, Creación de Cursos | ✅ Activo |
| Membresía INBOUND | CRM, funnels, email, chatbot, POS, ecommerce, IA | ✅ Activo |
| Podcast Digital Boosters | YouTube, iTunes, Spotify | ✅ Activo |
| Blog | 7+ artículos de marketing digital | 🔄 En crecimiento |
| Comunidad | Grupo de usuarios y alumnos certificados | ⚠️ Emergente |
Única academia con aval STPS/DC-3 en marketing digital. Validez laboral reconocida por empresas mexicanas.
$375 MXN/mes — democratiza el acceso a la certificación profesional. 10x más barato que alternativas sin STPS.
Cada curso termina con el alumno listo para ejecutar campañas reales con herramientas del mercado.
Cursos + software + podcast + blog + comunidad. No es una academia aislada, es un ecosistema de crecimiento.
Moat (Ventaja Competitiva Sostenible): La certificación STPS/DC-3 es el foso competitivo. Ningún competidor directo (Platzi, Crehana, Coursera, HubSpot, Google) ofrece certificación con validez oficial STPS. Esto crea una barrera de entrada regulatoria que protege a Academia.Marketing.
| Dimensión | Posición Actual | Oportunidad |
|---|---|---|
| Producto | 6 cursos + software | Expandir a especializaciones por industria (salud, retail, servicios) |
| Precio | $375 MXN/mes (líder en costo-beneficio) | Introducir tiers: Básico ($375), Pro ($599 con mentoría), Enterprise (corporativo) |
| Plaza | Online + Querétaro | Presencial en CDMX, Guadalajara, Monterrey + alianzas con universidades |
| Promoción | Redes + podcast + blog | Programa de afiliados, partners STPS, campañas B2B corporativas |
Los 6 cursos con certificación STPS/DC-3 — este es el motor del negocio. Todo lo demás (software, podcast, blog, comunidad) existe para nutrir y respaldar este núcleo.
Benchmark de mercado ampliado, análisis FODA y tendencias del mercado edtech en México y LATAM.
🔍 Nota: Esta sección complementa el análisis competitivo de la Sección 2 con un enfoque más profundo: FODA, tendencias del mercado edtech en LATAM, y estrategias de diferenciación a 1-3 años.
| Competidor | Región | Precio (MXN/mes) | STPS | # Cursos | Modelo | Diferenciador |
|---|---|---|---|---|---|---|
| Academia.Marketing | México | $375 | ✅ Sí | 6 | Suscripción | STPS + Ecosistema |
| Platzi | LATAM | $950 | ❌ No | 1600+ | Suscripción | Catálogo masivo tech |
| Crehana | LATAM | $390 | ❌ No | 2000+ | Suscripción | Creativo/artístico |
| Edteam | LATAM | $199 | ❌ No | 500+ | Suscripción | Precio bajísimo |
| Cursa | México | $249 | ❌ No | 200+ | Suscripción | Enfoque México |
| HubSpot Academy | Global | Gratis | ❌ No | 50+ | Gratuito | Cert. inbound marketing |
| Google Skillshop | Global | Gratis | ❌ No | 100+ | Gratuito | Cert. Google Ads |
| Coursera | Global | $1,150 | ❌ No | 7000+ | Suscripción/pago | Universitario |
| Udemy | Global | $200-3,800/curso | ❌ No | 200,000+ | Pago por curso | Catálogo gigante |
El mercado edtech LATAM crecerá a una tasa compuesta anual del 24% hasta 2028, impulsado por la digitalización forzada post-pandemia y la demanda de certificaciones laborales con validez oficial.
Cada vez más empresas mexicanas exigen comprobantes de capacitación con validez STPS. La reforma laboral de 2023 fortaleció este requisito, creando una demanda creciente de DC-3.
La inteligencia artificial generativa está transformando la creación de contenido educativo. Academia.Marketing ya ofrece un curso de ChatGPT aplicado al marketing, posicionándose a la vanguardia.
Las empresas mexicanas gastan en promedio $8,500 MXN por empleado/año en capacitación. El segmento corporativo representa una oportunidad de crecimiento significativa para certificaciones con validez oficial.
| Corto Plazo (6-12 meses) | Mediano Plazo (1-2 años) | Largo Plazo (2-3 años) |
|---|---|---|
| Consolidar los 6 cursos actuales con mejoras de contenido | Expandir a 10+ cursos (SEO, Email, Analytics, TikTok Ads) | Plataforma propia de IA para práctica de marketing simulada |
| Programa de afiliados y referidos | Alianzas con universidades y cámaras empresariales | Homologación STPS para otros países LATAM |
| Tiers de membresía (Básico/Pro/Enterprise) | App móvil con micro-learning y comunidad | Bolsa de trabajo exclusiva para egresados certificados |
| SEO y contenido orgánico agresivo | Expansión presencial: CDMX, GDL, MTY | Franquicias de Academia.Marketing en LATAM |
Conclusión: Academia.Marketing ocupa el cuadrante óptimo: precio bajo + certificación oficial + ecosistema completo. Ningún competidor combina estos 3 factores.
Estrategia de contenidos basada en el arquetipo Sabio + Mentor + Ciudadano mexicano.
Objetivo: Posicionar la certificación STPS/DC-3 como el estándar de la industria.
Formato: Infografías, testimonios en video, checklists, LinkedIn posts.
Frecuencia: 2-3/semana · KPI: CTR, leads calificados
Buyer Persona: Roberto (alto) · Gabriela (medio-alto)
Canal: LinkedIn · YouTube · Blog · WhatsApp
"El mercado digital exige resultados. Nosotros te damos la llave que los valida: la certificación DC-3 avalada por la STPS."
Objetivo: Demostrar aplicación práctica de cada curso.
Formato: Tutoriales, case studies, comparativas, templates.
Frecuencia: 3-4/semana · KPI: Engagement rate, watch time
Buyer Persona: Roberto (alto) · Gabriela (medio)
Canal: Instagram (Reels) · YouTube · Blog · TikTok
"Deja de perder presupuesto. Aprende a ejecutar campañas de Search Ads que realmente convierten. No es magia, es estrategia."
Objetivo: Fomentar la comunidad de profesionales del marketing en México.
Formato: Lives, entrevistas, grupos de discusión, eventos virtuales.
Frecuencia: 1-2/semana · KPI: Miembros activos, NPS
Buyer Persona: Roberto (alto) · Gabriela (alto)
Canal: LinkedIn · Facebook (Grupo) · Instagram · Podcast
"El marketing no se construye en solitario. Forma parte del ecosistema más sólido de profesionales certificados en México."
Objetivo: Motivar la acción y el crecimiento profesional constante.
Formato: Frases, historias de éxito, challenges.
Frecuencia: 2-3/semana · KPI: Shares, menciones de marca
Buyer Persona: Roberto (alto) · Gabriela (medio)
Canal: Instagram · LinkedIn · YouTube
"El conocimiento sin acción es solo entretenimiento. Aquí transformamos información en resultados medibles."
Objetivo: Hablar directamente a dueños de PyME que necesitan resultados prácticos.
Formato: Checklists, plantillas descargables, casos prácticos.
Frecuencia: 1-2/semana · KPI: Descargas, leads generados
Buyer Persona: Gabriela (alto) · Roberto (medio)
Canal: Facebook · Instagram · WhatsApp · Blog
"No necesitas un equipo grande para vender como uno. Necesitas las herramientas correctas y el conocimiento para usarlas."
| Canal | Pilar Principal | Formato Estrella | Frecuencia Sugerida |
|---|---|---|---|
| 02. Herramientas | Reels · Tutoriales · Stories | 5-7/semana | |
| 05. PyMEs | Lives · Grupo privado · Posts | 3-4/semana | |
| 01. Certificación | Artículos · Testimonios | 3-5/semana | |
| YouTube | 02. Herramientas | Tutoriales · Webinars | 1-2/semana |
| TikTok | 02. Herramientas | Tips rápidos · Trends | 3-5/semana |
| Blog | 01. / 05. | Guías SEO · Artículos profundos | 2/semana |
| Podcast | 03. Comunidad | Entrevistas · Q&A | 1/semana |
| Día | Pilar | Acción |
|---|---|---|
| Lunes | 🏛️ 01. Certificación | Artículo LinkedIn/Blog de autoridad |
| Martes | 🛠️ 02. Herramientas | Reel Instagram / TikTok tip rápido |
| Miércoles | 🌐 03. Comunidad | Live / Podcast / Post interacción |
| Jueves | 🛠️ 02. Herramientas | YouTube tutorial / Caso de estudio |
| Viernes | 🏛️ 01. / 💡 04. | Newsletter + Historia de éxito |
| Sábado | 💡 04. / 🏢 05. | Post aspiracional / Contenido PyME |
Narrativa de marca completa centrada en storytelling. Complementa la sección 3 (Manifiesto) y Misión/Visión/Valores.
El mercado mexicano del marketing digital está lleno de promesas vacías, cursos caros sin validez oficial y profesionales talentosos que no logran destacar por falta de credenciales.
Academia.Marketing nace como respuesta. Un equipo de mentores certificados sueña con un ecosistema completo que cierre la brecha entre el talento y la validez oficial.
Convencer a la STPS de avalar un programa 100% digital, accesible y con el rigor que el mercado mexicano exige.
El DC-3 no es solo un papel, es la llave que abre puertas en el mercado laboral mexicano. El rito de paso que transforma estudiantes en profesionales certificados.
Miles de profesionales transforman sus carreras. La academia se convierte en el ecosistema de referencia del marketing digital en México.
| Fase | Hito Clave |
|---|---|
| Origen | Identificación de la brecha de certificación oficial STPS en marketing digital en México. |
| Hito 1 | Alianza estratégica STPS y desarrollo del primer programa con validez oficial DC-3. |
| Hito 2 | Lanzamiento de los primeros 3 cursos: Funnels, Search Ads, Redes Sociales. |
| Hito 3 | Expansión: Retargeting, ChatGPT, Creación de Cursos. Ecosistema completo. |
| Hito 4 | Comunidad activa de profesionales certificados. De academia a ecosistema. |
| Evolución | Mentoría personalizada, bolsa de trabajo, eventos exclusivos para egresados. |
Roberto tiene talento, pero las agencias le piden "certificación oficial". Descubre Academia.Marketing, no solo obtiene su DC-3, aprende a aplicar Funnels y Search Ads. En 3 meses consigue el trabajo de sus sueños.
🧭 La certificación STPS transformó su trayectoria.
Gabriela tiene una PyME que crece, pero entiende por qué sus anuncios no funcionan. En Academia.Marketing aprende a manejar sus campañas y certifica a su equipo. Recupera el control de su negocio y duplica sus ventas.
🏢 El DC-3 es el sello de que su equipo sabe lo que hace.
"En México, la STPS no avala cualquier cosa. Cuando un profesional obtiene su DC-3 con nosotros, no solo demuestra conocimiento. Pasa por un proceso riguroso que lo transforma de un estudiante a un experto certificado. Es el muro que separa a los que saben de los que lo intentan."
Detrás de cada certificado DC-3 hay una historia de esfuerzo, práctica y la emoción de un logro que transforma una carrera.
La STPS certifica menos del 5% de los programas de marketing digital en México. Nuestro plan de estudios cumple los estándares más altos.
Imagina liderando el departamento de marketing de la empresa top. No como soñador, sino como profesional certificado.
"No solo te enseñamos marketing. Te damos las credenciales oficiales, el ecosistema de apoyo y la comunidad de mentores para que tu carrera o negocio sea imparable. Tu éxito es nuestro legado."
Herramientas profesionales de copywriting para crear contenido consistente y efectivo. Complementa los ejemplos de la sección 7.
| Curso | Problem | Agitate | Solution |
|---|---|---|---|
| Funnels | Tus leads llegan, no compran | Miles de pesos perdidos en tráfico sin camino de conversión | Construye funnels que convierten |
| Google Search Ads | Pagas clicks, no resultados | 80% del presupuesto se va en keywords equivocadas | Domina la intención de búsqueda |
| Retargeting | Los visitantes se van y no vuelven | 97% del tráfico abandona sin comprar | Recupera clientes potenciales |
| ChatGPT | Pasas horas escribiendo copy | Tu competencia usa IA y hace en 1 hora lo que te toma un día | Automatiza tu copywriting |
| Redes Sociales | Publicas contenido que nadie ve | El algoritmo castiga la inconsistencia | Estrategia de contenido que vende |
| Creación de Cursos | Tienes el conocimiento, no sabes venderlo | Miles de creadores luchando sin diferenciación | Lanza tu curso con estrategia probada |
| Canal | Attention | Interest | Desire | Action |
|---|---|---|---|---|
| Instagram Reel | Hook visual potente | Valor rápido y útil | Resultado tangible | Link en bio / DM |
| LinkedIn Post | Pregunta provocadora | Estadística o historia real | Solución concreta | Comenta 'INFO' / Enlace |
| YouTube | Thumbnail + Intro | Desarrollo profundo | Casos de éxito | Suscríbete / Link al curso |
| Subject line irresistible | Cuerpo con valor | Beneficios exclusivos | CTA al curso |
| Servicio | Feature | Advantage | Benefit |
|---|---|---|---|
| Google Search Ads | Curso práctico con mentoría | Aprende a optimizar en 4 semanas | Tu presupuesto rinde al 100% |
| Certificación STPS/DC-3 | Aval oficial STPS | Requisito en miles de vacantes | Tu empleabilidad se dispara |
| ChatGPT Marketing | Plantillas + prompts optimizados | Reduce tiempo de creación 80% | Enfócate en estrategia |
Promise: "Domina Google Ads en 4 semanas con certificación STPS."
Picture: "Imagina tu dashboard con ROAS de 5x mientras te enfocas en crecer."
Proof: "500+ alumnos certificados. Roberto incrementó ventas 40% en 3 meses."
Push: "Inscríbete hoy. Cupo limitado por mentoría personalizada."
| Objetivo | Subject Line |
|---|---|
| Curiosity | "¿Tu competencia ya está certificada con DC-3?" |
| Pain Point | "Sí, el algoritmo te está castigando. Aquí la solución." |
| Benefit | "Duplica tus leads con este entrenamiento GRATIS." |
| Urgency | "Últimos 5 lugares para la certificación STPS del mes." |
| Social Proof | "A 345 profesionales les gusta esto (y a ti también)." |
| TOF | "Nuevo Ebook: El mapa del marketing digital en México" |
| MOF | "3 pasos para elegir la certificación correcta" |
| BOF | "Tu descuento exclusivo para el DC-3 termina mañana" |
| ❌ NO Escribas | ✅ Cómo Hacerlo Correcto |
|---|---|
| "Hazte rico con este método secreto" | "Aumenta tu empleabilidad con certificación oficial" |
| "El curso más viral de internet" | "El curso con respaldo STPS y resultados comprobados" |
| "Gana dinero fácil sin trabajar" | "Invierte en tu futuro profesional con resultados medibles" |
| "Viraliza tu negocio con este hack" | "Construye una estrategia de contenido sólida y sostenible" |
Ejemplos visuales con el logotipo real de Academia.Marketing. Usos correctos ✅ e incorrectos ❌ complementando las reglas textuales de la sección 5.
Distorsiona la proporción 3.72:1. Nunca estirar el logo.
Proporción 3.72:1 preservada. Sin distorsión.
Aplasta el logotipo. Pierde legibilidad y jerarquía.
El logo debe permanecer siempre horizontal a 0°.
El logo debe ser plano. Sin sombras, brillos ni filtros.
Logo claro sobre fondo oscuro. Usar versión fondo-oscuro (texto naranja).
Naranja cambiado por verde. Usar exclusivamente los colores oficiales #FF7F01 / #FAFAFA.
No agregar contornos decorativos al logo.
#003468
#FAFAFA
#FFFFFF
#FF7F01
#000000
PNG/SVG
Regla: Usar fondo-oscuro sobre fondos con luminancia < 40%, fondo-claro sobre blancos/grises claros, blanco sobre colores vibrantes, original sobre blanco puro, negro sobre fondos muy claros en B&W.
Documentación visual del sistema de modo oscuro de Academia.Marketing. Paleta, mapeo de variables, ejemplos comparativos y buenas prácticas.
#1a1a2e#16213e#1f2b47#e8e8f0#a0a0b8#2a3a5c| Variable | Light | → | Dark |
|---|---|---|---|
| --bg-body | #FFFFFF | → | #1a1a2e |
| --bg-alt | #f8f8f8 | → | #16213e |
| --bg-card | #FFFFFF | → | #1f2b47 |
| --text-primary | #000000 | → | #e8e8f0 |
| --text-secondary | #6A6A6A | → | #a0a0b8 |
| --border-color | #CBD5E0 | → | #2a3a5c |
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease
/* 🌙 Dark Mode - CSS Custom Properties */
[data-theme="dark"] {
--bg-body: #1a1a2e;
--bg-alt: #16213e;
--bg-card: #1f2b47;
--text-primary: #e8e8f0;
--text-secondary: #a0a0b8;
--border-color: #2a3a5c;
/* Acentos se mantienen */
--accent-green: #37CA37;
--accent-orange: #FF7F01;
--accent-blue: #188BF6;
--accent-cyan: #00D4FF;
/* Sombras más sutiles */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 4px 6px rgba(0,0,0,0.3);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
}Principios, duraciones, easing functions y ejemplos de animación para interfaces de Academia.Marketing. Priorizamos rendimiento y usabilidad.
Micro-interacciones: 200-300ms. Transiciones de página: 400-600ms. Consistencia es clave.
Usar cubic-bezier() personalizados. Movimientos naturales, nunca lineales excepto para progreso.
Una sola animación principal por momento. Lo secundario se mueve más lento.
| Tipo | Duración | Easing | Uso |
|---|---|---|---|
| Micro | 100-200ms | ease-out | Hover, focus, ripple, tooltip |
| Interacción | 200-300ms | cubic-bezier(0.4,0,0.2,1) | Cards, acordeones, menús |
| Transición | 300-500ms | cubic-bezier(0.4,0,0.2,1) | Páginas, modales, rutas |
| Énfasis | 500-800ms | cubic-bezier(0.25,0.8,0.25,1) | Notificaciones, banners, loader |
Hover button — translateY + sombra, 200ms ease-out
Focus input — borde naranja + anillo, 200ms ease-out
Skeleton — shimmer con gradiente móvil, 1.5s
/* Standard ease-out */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* Standard ease-in-out */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Énfasis / entrada */
--ease-emphasis: cubic-bezier(0.25, 0.8, 0.25, 1);
/* Salida rápida */
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
/* Lineal (solo progreso) */
--ease-linear: linear;Motion Tokens
:root {
--duration-micro: 150ms;
--duration-fast: 200ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
--duration-emphasis: 700ms;
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
}/* Fade In */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Slide Up */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}/* Scale In */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Shimmer (skeleton) */
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}transform y opacity. Nunca animar width, height, top, left.
prefers-reduced-motion. Reducir animaciones a 0.01ms.